Problem with iteration in React

Question

I’m consuming an API, and putting your data in a 'li', only it’s popping the page because I mapped all the api items:

function showState(states){
    return states.map(state => <li key={state.nome}>{state.nome} - {state.sigla}</li>)
}

...

<div className="center">
            <ul>
                {response.data? showState(response.data): response.err}
            </ul>
 </div>

The idea would be that the return of the showState function would generate something like, but dynamically, limiting 9 'li' by 'ul':

<ul>
   <li>key={state[0].nome}>{state[0].nome} - {state[0].sigla}</li>
   <li>key={state[1].nome}>{state[1].nome} - {state[1].sigla}</li>
   <li>key={state[2].nome}>{state[2].nome} - {state[2].sigla}</li>
   ...
   <li key={state[8].nome}>{state[8].nome} - {state[8].sigla}</li>
</ul>
<ul>
   <li>key={state[9].nome}>{state[9].nome} - {state[9].sigla}</li>
   <li>key={state[10].nome}>{state[10].nome} - {state[10].sigla}</li>
   <li>key={state[11].nome}>{state[11].nome} - {state[11].sigla}</li>
   ...
   <li key={state[16].nome}>{state[16].nome} - {state[16].sigla}</li>
</ul>
<ul>
   <li>key={state[17].nome}>{state[17].nome} - {state[17].sigla}</li>
   <li>key={state[18].nome}>{state[18].nome} - {state[18].sigla}</li>
   <li>key={state[19].nome}>{state[19].nome} - {state[19].sigla}</li>
   ...
   <li key={state[26].nome}>{state[26].nome} - {state[26].sigla}</li>
</ul>

Answer 1

If I understand correctly, you need to filter the amount of elements to not render everything at once. The easiest way to do this would be to maintain the state of the indexes you want and use the function filter on your list states, something like:

const filteredStates = states.filter((state, index) => { if (index >= indexStart && index < indexLimit) return state; });

And pass the filteredStates in the call of its function showState. If there is an event triggered by the user, for example, you can update the values of the variables indexStart and indexLimit calling the function again. This causes only index items within the set limit to return.

I hope I’ve helped in some way.