Unable to Update Array object with a new Textinput data in React Native

Question

I am new to react-native hooks. I am trying to update my array object by whatever the user types in the TextInput field. How can I do it??

where's my state and my folder array object

    const [folder, emptyFolder] = useState([]);

      Array [
  Object {
    "id": "0.017859040901406997",
    "value": "Bar",
  },
]

where's my TextInput. {itemData.item.value} is where I am displaying the name "Bar". I want to update my array with a new array TextInput name. That name is whatever the user enters. Thanks In advance.

    const handlePress = () => {
       ... { map the array[value] an display the new array[value]} ???
      };

<FlatList
    style={{ margin: 2 }}
    data={folderToDisplay}
    //keyExtractor={(item) => item.id}
    numColumns={4}
    renderItem={(itemData) => {
      return (
        <View style={styles.homeRowFolder}>
          <View style={styles.iconAndText}>
              <Text style={styles.textdisplay}>
                {itemData.item.value}
              </Text>
          </View>
        </View>
      );
    }}
  />

Ofito · Accepted Answer · 2020-05-12 14:36:42Z

1

I'm not sure what is itemData, I'm supposing is the folder state, in that case I would do something like these.

UPDATE

Use setFolder to update your objects Array:

  const folderContent = [
    {id: '0.017859040901406997', value: 'Bar'},
    {id: '0.017859040901406998', value: 'Mall'},
    {id: '0.017859040901406999', value: '...'},
    {id: '0.017859040901407000', value: '...'},
  ]
  const [folder, setFolder] = useState(folderContent)

Create a folder copy in handlePress function using the new text coming from the TextInput and the array index, and use setFolder to save the new array:

const handlePress = (text, index) => {
    const newFolder = [...folder]
    newFolder[index].value = text

    setFolder(newFolder)
  }

Pass your folder as data to your FlatList. In TextInput call handlePress when onChangeText with the new text and the array index:

        <FlatList
          data={folder}
          keyExtractor={item => item.id}
          renderItem={({item, index}) => {
           return (
              <TextInput onChangeText={text => handlePress(text, index)}>
                {item.value}
              </TextInput>
            )
          }}
        />

edited May 12, 2020 at 14:36

answered May 6, 2020 at 21:18

Ofito

112 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pedro Over a year ago

Hi @Ofito thank you for your response. {itemData.item.value} is how I am getting the value inside the array. I am Not quite sure what you want me to do here const [folder, setFolder] = useState([ { id: '0.017859040901406997', value: 'Bar', }, ]). Do you want me to create a new empty state array?? or fill the state with my existence array??? and don't know what is going on here {folder[0].value}. You may notice by now I am lost. Sorry, man, I know you trying to help appreciate you in advance.

Ofito Over a year ago

Can you show us where is located TextInput? From where you get itemData?

Pedro Over a year ago

just update my question hope is more clear now... Thank you in advance for helping me.

Pedro Over a year ago

thank you for your help one more question how about if a have more objects in my array? Exemplo { id: '0.017859040901406997', value: 'Bar', },{ id: '0.017859040901406997', value: 'Mall', },{ id: '0.017859040901406997', value: '...', },{ id: '0.017859040901406997', value: '...', }, how can I display the name for each different value?

Ofito Over a year ago

Added an update with a FlatList. I hope now is more clear.

Collectives™ on Stack Overflow

Unable to Update Array object with a new Textinput data in React Native

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related