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

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>
    </>
  );

CodePudding user response：

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;
    });
  }