react native cant use render item-CodePudding

hello im trying to buil a todo list using react native, but i have a problem with my render item function i´ve trying to use typescript and had a problem when i want to show the items on my screen. this is my code so far.

this gets all task and do console log to check if the array exist (until here,it works)

 useEffect(() => {
traerTareas()
  if(tareas){
    tareas.forEach((item:any) => {
    console.log(item.titulo)
  });
}

}, [])

then use a renderItem function

 const renderItem = ({tarea}:any)=>{
  return(
  <>
    <Text>{tarea.titulo}</Text>
    <Text>{tarea.tarea}</Text>
  </>)

} and finally use the Flatlist

return (
<View style={{flex:1}}>
  {tareas && 
  <FlatList
    data={tareas}
    keyExtractor={(tarea)=> tarea.id}
    renderItem={renderItem}
  />}
  
  <Button
    title='traer tareas'
    onPress={traerTareas}
  />
  
  <TouchableOpacity 
    style={style.boton}
    onPress={()=> navigation.navigate('Agregar tarea')}
    >
  <Entypo  name="plus" size={34} color="white" />
  </TouchableOpacity>
</View>

) } and this returns me Render error undefined is not an object(evaluating 'tarea.titulo') i want to know what im doing wrong. thanks for any advise

CodePudding user response：

As documentation says you have to use these parameters:

renderItem({ item, index, separators });

and you can't use your own names of variables here!

To fix your code, you must do:

 const renderItem = ({ item })=> (
    <>
       <Text>{item.titulo}</Text>
       <Text>{item.tarea}</Text>
    </>
 )