React Native Updating an Array of JSON objects onChangeText, index undefined

Question

I've got a useState variable that has an array of JSON objects, and I'm trying to get the text fields to dynamically render and update with onChangeText, but I'm having a bit of an issue with this.

When I add console.log(index) to updateHashtags, it says it is undefined, and I can't understand what I'm doing wrong or can do to make this work. In theory, the index should be a static number for each text field. So the first text field would have hashtags[0] as its value and use '0' as the index for updating the state of hashtags.

When I use: console.log('index',index); inside of updateHashtags, I get: index undefined

Here's the code:

  const updateHashtags = (text, index) => {
    let ht = hashtags;
    ht[index].name = text;
    setHashtags(ht);
  }

  const hashtagElement = (
    <>
    <Text style={styles.plainText} >Set Your Values:</Text>
    <Text style={styles.instructionsText} >This is what other users use to search for you.</Text>
    {hashtags.map((e,index) => 
    <TextInput 
      placeholder='value'
      key={e.name + index}
      value={hashtags[index].name}
      onChangeText={(text,index) => updateHashtags(text,index)}
      style={styles.textInput}  
    />
    )}
    <TouchableOpacity 
      onPress={() => {
        let ht = hashtags;
        let newht = {
            name: '',
            weight: 0,
        };
        ht[ht.length] = newht;
        setHashtags(ht);
      }}
    >
      <Ionicons 
        name="add-circle-outline"
        size={40}
        color={'black'}
      />
    </TouchableOpacity>
    </>
  );

Anurag Parmar · Accepted Answer · 2022-05-04 11:54:52Z

1

Maybe the onChangeText functions doens't get index param.

Try it like this:

// we are getting index from here
{hashtags.map((e,index) => 
    <TextInput 
      placeholder='value'
      key={e.name + index}
      value={hashtags[index].name}
      // so no need of taking index from param here
      onChangeText={(text) => updateHashtags(text,index)}
      style={styles.textInput}  
    />
)}

Also for your updateHashTags functions consider this insted:

  const updateHashtags = (text, index) => {
    // doing it this way ensures your are editing updated version of state
    setHashtags((state) => {
    let ht = state;
    ht[index].name = text;
    return ht;
    });
  }

edited May 4, 2022 at 11:54

answered May 4, 2022 at 11:49

Anurag Parmar

2933 silver badges15 bronze badges

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

1 Comment

astuertz Over a year ago

I ended up finding a video led me to that same conclusion. It was because I was using (text, index) => for my onChangeText function, and changing it to just text => solved the issue. I did find another problem, which was that I could only input 1 char at a time, which was an issue with the key. I changed the key to {index + 'values'} which solved that. I don't quite understand what the difference is with the (state) => function, though. Could you explain that a bit more?

Collectives™ on Stack Overflow

React Native Updating an Array of JSON objects onChangeText, index undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related