Flat List Data is not showing-CodePudding

I am using flatlist for show user input notes in my app. But Flat List is not render any item that i entered. I used static list for testing and it works correctly. but when i enter a text through textinput it is not showing.

const addToDoHandler = () => {
    if(userInput == ''){
      return;
    }

    const newTodo = {
      id: Math.floor(Math.random() * 1000),
      text: userInput,
      completed: false,
    };

    const newTodos = [...todos, newTodo];
    setTodos(newTodos);

    //clear user input
    setUserInput('');

  };

  const renderItem = ( {item} ) => {
    <View style={{backgroundColor:'#6b4d87', marginVertical: 10, flexDirection:'row', alignItems:'center', justifyContent:'space-between', height:60, width:'95%', borderRadius:10 }}>
      <View>
        <Text style={{color:'black', fontSize:20, fontWeight:'bold'}}>{item.text}</Text>
      </View>

      <TouchableOpacity onPress={() => deleteHandler(item.id)}>
        <TrashIcon size={35} name="trash" style={{color:'#eff9f0'}} />
      </TouchableOpacity>
    </View>
  };

return (
    <SafeAreaView style={styles.root}>
      <View style={styles.txtInputView}>
        <TextInput
        value={userInput}
        onChangeText={text => setUserInput(text)}
        style={styles.textInput}
        placeholder={"Enter Your Note..."}
         />

         <TouchableOpacity style={styles.addButton} onPress={addToDoHandler}>
           <PlusSign size={35} name="add-sharp" style={styles.plusIcon}/>
         </TouchableOpacity>
      </View>

      <View style={{alignItems:'center'}}>
        <FlatList
          data={todos}
          renderItem={renderItem}
          keyExtractor={item => item.id}
        />
      </View>
      
    </SafeAreaView>
  );

CodePudding user response：

You need to return the components from renderItem.

Change it to:

const renderItem = ( {item} ) => (
    <View style={{backgroundColor:'#6b4d87', marginVertical: 10, flexDirection:'row', alignItems:'center', justifyContent:'space-between', height:60, width:'95%', borderRadius:10 }}>
      <View>
        <Text style={{color:'black', fontSize:20, fontWeight:'bold'}}>{item.text}</Text>
      </View>

      <TouchableOpacity onPress={() => deleteHandler(item.id)}>
        <TrashIcon size={35} name="trash" style={{color:'#eff9f0'}} />
      </TouchableOpacity>
    </View>
  );