React Native Update a Flatlist Item - react-native

Question

I want to update a specific Flatlist row when it is clicked, how can I do this? The solutions I found are all using extraData={this.state}, which is not working in my code.
const [records,setRecords] = useState([]);
//add initial data to records
...
return (
<FlatList
data={records}
keyExtractor={item => item.id}
renderItem={itemData =>
<RecordItem
onSelect={() => {
props.navigation.navigate({...})
}
}
onApply={()=>{
// in my RecordItem these is a button to call onApply(),
and I want to update the Flatlist when I click this button
var res = applyHandler();
return res;
}}
>
</RecordItem>
}
/>)

Answer 1

To update your flatlist item, you just have to update the data it is rendering from, in order to do this, in your onApply function you know the item index with which you can update the record index like:
const [records,setRecords] = useState([]);
//add initial data to records
...
return (
<FlatList
data={records}
keyExtractor={item => item.id}
renderItem={itemData =>
<RecordItem
onSelect={() => {
props.navigation.navigate({...})
}
}
onApply={()=>{
// here you will get reference to record item index,
const itemIndex = itemData.index;
const modRecords = [...records];
modRecords[itemIndex].title = 'NEW TITLE';
// assuming title is what you want to change
// now just update the records using setRecords
setRecords(modRecords);
}}
>
</RecordItem>
}
/>)