0
I’m trying to insert a SectionList
, but is returning in the console, in order, the following errors:
Uncaught TypeError: Cannot read property 'length' of undefined
The above error occurred in the <VirtualizedSectionList> component:
Uncaught TypeError: Cannot read property 'length' of undefined
Date code to put in SectionList
:
const {data, esporte, quantidadeTimes} = route.params;
function embaralhar(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function separarTimes(arr, tamanho) {
var novoArray = [];
var i = 0;
var numeroTime = 1;
while (i < arr.length) {
novoArray.push({title: "Time "+ numeroTime, nomes: arr.slice(i, i + tamanho), });
numeroTime += 1;
i += tamanho;
}
return novoArray;
}
const dataEmbaralhada = embaralhar(data);
const timesSeparados = separarTimes(dataEmbaralhada, Math.trunc(data.length/quantidadeTimes))
Example timesSeparated:
[
{
title: "Time 1",
nomes: [
{
nome: "Nome1",
nivelId: 4,
isGoleiro: false,
id: 0
},
{
nome: "Nome2",
nivelId: 0,
isGoleiro: false,
id: 1
},
{
nome: "Nome3",
nivelId: 2,
isGoleiro: true,
id: 2
},
]
},
{
title: "Time 2",
nomes: [
{
nome: "Nome1",
nivelId: 4,
isGoleiro: false,
id: 0
},
{
nome: "Nome2",
nivelId: 0,
isGoleiro: false,
id: 1
},
{
nome: "Nome3",
nivelId: 2,
isGoleiro: true,
id: 2
},
]
}
]
Code SectionList
:
<ListaNomes
renderItem={renderItem}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={timesSeparados}
keyExtractor={(item, index) => item + index}
/>
Code rendering list items:
const renderItem = ({item}) => {
return (
<NomeItemContainer>
<Nome>
{item.nomes.nome}
</Nome>
<Infos>
<Nivel>
{item.nomes.nivelId}
</Nivel>
{
item.nomes.goleiro === true
? <MaterialIcons name="pan-tool" size={20} color="white" style={{paddingRight: 5}}/>
: <Nome></Nome>
}
</Infos>
</NomeItemContainer>
);
}