Tengo estos elementos bastante fáciles en los que normalmente hago un bucle con el map :
{items.map((item, index) => { return ( <Item desc={item.desc} done={item.done} index={index} key={index} onSetDone={setDone} /> ); })} El código anterior funciona bien, pero como aprendí, es mejor usar FlatList en mis componentes para renderizar algo en un bucle. Así que probé lo siguiente:
<FlatList data={items} renderItem={(item, index) => ( <Item desc={item.desc} done={item.done} index={index} onSetDone={setDone} /> )} keyExtractor={(item, index) => index} /> Se procesa la cantidad correcta de elementos, pero desafortunadamente, ninguno de los accesorios se pasa al componente secundario. Obtener undefined undefined true .
¿Qué estoy haciendo mal aquí? ¿Por qué mis datos no se pasan correctamente?
No le está dando a renderItem una función con el parámetro correcto. Aquí está su firma del documento :
renderItem({ item, index, separators })Cambia tu código a este:
<FlatList data={items} renderItem={({ item, index }) => ( <Item desc={item.desc} done={item.done} index={index} onSetDone={setDone} /> )} keyExtractor={(item, index) => index} />