javascript - SectionList/FlatList isn't showing the correctly list

Question

I am creating a page that has a SectionList, however, it is not showing all items, there is always 1 item less than the selected Array.

Not only on this page, but on another one that has a FlatList the same thing happens, it does not render the last item

This is the array that I put at Section List

Array [
  Object {
    "data": Array [
      Object {
        "goleiro": false,
        "nome": "1",
      },
      Object {
        "goleiro": false,
        "nome": "2",
      },
      Object {
        "goleiro": false,
        "nome": "4",
      },
      Object {
        "goleiro": false,
        "nome": "4",
      },
      Object {
        "goleiro": false,
        "nome": "54",
      },
      Object {
        "goleiro": false,
        "nome": "4",
      },
    ],
    "title": "Time 1",
  },
  Object {
    "data": Array [
      Object {
        "goleiro": false,
        "nome": "1",
      },
      Object {
        "goleiro": false,
        "nome": "3",
      },
      Object {
        "goleiro": false,
        "nome": "1",
      },
      Object {
        "goleiro": false,
        "nome": "2",
      },
      Object {
        "goleiro": false,
        "nome": "1",
      },
      Object {
        "goleiro": false,
        "nome": "23",
      },
    ],
    "title": "Time 2",
  },
  Object {
    "data": Array [
      Object {
        "goleiro": false,
        "nome": "34",
      },
      Object {
        "goleiro": false,
        "nome": "1",
      },
      Object {
        "goleiro": false,
        "nome": "5",
      },
      Object {
        "goleiro": false,
        "nome": "4",
      },
    ],
    "title": "Time 3",
  },
]

This is the code of page:

import React from 'react';
import { Container, Cabecalho, TitlePage, Nome, ListaNomes, TituloSecao, TimeNumber, ListaView } from './styles';
import { MaterialIcons } from '@expo/vector-icons';


const finalPage = ({route, navigation}) => {
  const {data, esporte, quantidadeTimes} = route.params;

  function separarTimes(arr, tamanho) {
    var novoArray = [];
    var i = 0;
    var numeroTime = 1;
    while (i < arr.length) {
      novoArray.push({title: "Time "+ numeroTime, data: arr.slice(i, i + tamanho)});
      numeroTime += 1;
      i += tamanho;
  
    }
    return novoArray;
  }

  const timesSeparados = separarTimes(data, Math.ceil(data.length/quantidadeTimes))
  console.log(timesSeparados);

  return (
      <Container>
          <Cabecalho>
              <TitlePage>{esporte}</TitlePage>
          </Cabecalho>
          <ListaView>
            <ListaNomes
              sections={timesSeparados}
              keyExtractor={(item, index) => item + index}
              renderItem={({item }) => {
                return (
                  <Nome>{item.nome}</Nome>
                );
              }}
              renderSectionHeader={({ section }) => (
                <TituloSecao>
                  <TimeNumber>{section.title}</TimeNumber>
                </TituloSecao>
              )}
            />
          </ListaView>
      </Container>
  );
}

export default finalPage;

question from:https://stackoverflow.com/questions/65873877/sectionlist-flatlist-isnt-showing-the-correctly-list

Answer 1

Waitting for answers