Tell me how to sort 32 elements in such a way that 16 are active and the other 16 are inactive?

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", ];

and further through the map

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

Closed due to the fact that the essence of the issue is incomprehensible by the participants Igor , Stepan Kasyanenko , Kromster , 0xdb , aleksandr barakin 2 Jan at 10:15 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • How do the first 16 elements differ from the 16 others in the array allowedNamesAll ? - Stepan Kasyanenko

1 answer 1

If I understand the question correctly, then I need to output the first 16 elements of the array with the class "active". To do this, you can use the second parameter passed by the map method to the CallBack. For an array, this is its index.

In the example below, if the array index is less than 16, then the div element is displayed with the class 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>

  • Just not key < 15 , a key < 16 - Alexandr Tovmach