React native Flatlist item is not update

Question

i am currently doing a project where i can input item subjects in my Flatlist and update the item by adding NewMark and NewGrade . i have tried to console log and the input value is inputted but it does not change the NewMark and NewGrade value with the the inputted value. i expect that the NewMark and NewGrade value is updated but actual result is still an empty string value . How can i get the NewMark and NewGrade value changed according to the new input value?

this is to add the subject in the flatlist

const addSubject = () => {
    if (subjectInput === '' || markInput === '' || gradeInput === ''){
      Alert.alert('Error', 'Please input todo');
    } else {
      const newSubject = {
        id: Math.random().toString(),
        Subject: subjectInput,
        Mark: markInput,
        Grade: gradeInput.toUpperCase(),
        Selected: false,
        NewMark: '',
        NewGrade: '',
      };
      setSubjects([...subjects,newSubject]);
    }
  };

my flatlist to be return

<FlatList
showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 10 , paddingBottom: 100}}
data={subjects}
keyExtractor = { (item) => item.id.toString() }
renderItem={({ item }) => <ListItem subject={item}/>}
/>

textinput box to update the subject item (add newMark and newGrade)

<View style={styles.update}>
        <TextInput
          style={[styles.updateInput, { borderTopLeftRadius: 10, borderBottomLeftRadius: 10, }]}
          placeholder={'New Mark...'}
          keyboardType= "numeric"
          value={newMarkInput}
          onChangeText={(text) => setNewMarkInput(text)}
        />
        <TextInput
          style={[styles.updateInput, { borderBottomRightRadius: 30}]}
          placeholder={'New Grade...'}
          value={newGradeInput}
          onChangeText={(text) => setNewGradeInput(text)}
        />
        <TouchableOpacity style={styles.updateBtn} onPress={item => updateSubject(item?.id)} >
          <View >
            <Icon name="add" size={30} color="white"/>
          </View>
        </TouchableOpacity>
      </View>

this is to update (add newMark and newGrade) in the subject item

const updateSubject = (subjectId) => {
    if (newMarkInput === '' || newGradeInput === ''){
      Alert.alert('Error', 'Please fill in all boxes');
    } else {
    const newSubject = subjects.map(item => {
      if (item.id === subjectId) {
        return {...item,Selected: false, NewMark: newMarkInput, NewGrade: newGradeInput};
      }
      return item;
    }
    );
    setSubjects(newSubject);
    console.log(newMarkInput,newGradeInput, newSubject);
  }
    setNewMarkInput('');
    setNewGradeInput('');
    setShowInputBox(false);
  };

score 0 · Answer 1 · answered Sep 12 '21 at 16:20

0

Use extraData prop of FlatList extradata

extraData watches for the changes and re-render / updates the Flatlist


<FlatList

extraData{subjects} // add this
showsVerticalScrollIndicator={false}
contentContainerStyle={{ padding: 10 , paddingBottom: 100}}
data={subjects}
keyExtractor = { (item) => item.id.toString() }
renderItem={({ item }) => <ListItem subject={item}/>}
/>

answered Sep 12 '21 at 16:20

Anwar Gul

665
4
15

thank you for the suggestion Anwar, but i still have the same problem. at the Console, i see that not just the NewMark and NewGrade is unchanged, but Selected is also not changing to false as expected – BunnyHOPE Sep 12 '21 at 17:05

React native Flatlist item is not update

1 Answers1