Data Not Display with FlatList React Native-CodePudding

I want to display Data that user enter in Input Fields. I am basically storing data in Array as Object. In console Data is insert In Array But not Able to Print it in VIew with FlatList. How can I Display data when user Click on Submit Button.

  var testObject = [];
  const Item = ({ title }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  const [name, setName] = useState();
  const [age,setAge] = useState();
  const [address,setAddress] = useState();
  const [phone,setPhone] = useState();

  const onSubmit = ()=>{
    testObject.push({
      name: name,
      Age: age,
      Year: address,
    })
    console.log(testObject)
  }
  return (
    <View>

      <TextInput
        onChangeText={setName}
        value={name}
        />
<TextInput
        onChangeText={setAge}
        value={age}
      
      />
      <TextInput
     
        onChangeText={setAddress}
        value={address}
      
      />

<Button
  onPress={onSubmit}
  title="Submit"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>
<FlatList
        data={testObject}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />

    </View>
  )
}

CodePudding user response：

The setName, setAge etc. need to have functionality, right now they're doing nothing. Your onChangeText props they should look something like this - onChangeText={(userInput) => setName(userInput)} - here's the react native docs repl for reference https://reactnative.dev/docs/handling-text-input

CodePudding user response：

Change onChangeText inside TextInput

> TextInput in ReactNative has a onChangeText prop that takes a function to be called every time the text changed.

onChangeText={newText => setText(newText)}


   <TextInput
        onChangeText={(inputName) => setName(inputName)}
        value={name}
      />
      <TextInput onChangeText={(inputAge) => setAge(inputAge)} value={age} />
      <TextInput
        onChangeText={(inputAddress) => setAddress(val)}
        value={address}
      />