Как правильно отсортировать? [закрыт]

144

09 июля 2019, 16:40

Подскажите как отсортировать 32 элемента таким образом чтобы 16 были активные а остальные 16 неактивные ?

export const allowedNamesAll = [
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",

    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
    "name1",
];

и дальше через map

allowedNamesAll.map(item => <div className="active">{item}</div>)

Answer 1

Если я правильно понял вопрос, то нужно вывести первые 16 элементов массива с классом "active". Для этого можно воспользоваться вторым параметром, передаваемым методом map в CallBack. Для массива - это его индекс.

В приведенном ниже примере, если индекс массива меньше 16, то элемент div выводится с классом active.

const allowedNamesAll = [ 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
 
 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
    "name1", 
]; 
 
const SortOut = () => { 
   const outNames = allowedNamesAll.map((item,key) => <div key={key} className={key < 16 ? "active" : ""}>{item}</div>); 
   return (<div>{outNames}</div>); 
} 
 
 
 
const domContainer = document.querySelector('#react-root'); 
ReactDOM.render(<SortOut/>, domContainer);

.active { 
  color: red; 
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
<div id="react-root"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не срабатывает повторный запрос к базе данных

Файл базы данных SelectDbjs

144

javascript

Получить первый кадр видео [закрыт]

Нужно получить первый кадр из видео и вставить в img на javascripte

134

javascript

Как сделать, чтобы слайдер не реагировал на мышку?

Я взял слайдер с сайта http://kenwheelergithub

119

javascript

Не работает вторая карта yandex

Всем привет,я тут первый раз верстаю макет, на двух разных страницах есть карта яндексНо вторая карта не загружается, если удалить код из js первой...

118