FlatList doesn't render with React Hooks - reactjs

Question

I am trying to rename [0]items in FlatList by clicking some item, But it doesn't work for me, when i click on each item nothing happen and i don't get any error. How can i fix this?
This is my code.
export default function renameSample() {
const data = [
{
id: '1',
name: 'test1',
},
{
id: '2',
name: 'test2',
},
{
id: '3',
name: 'test3',
},
];
const [stateUser, onChangeUser] = useState(data);
return (
<FlatList
data={stateUser}
renderItem={({item}) =>
<TouchableOpacity
onPress={() => {
let setData = stateUser;
setData[0].name = 'changed';
onChangeUser(setData);
}
}
>
<Item name={item.name} />
</TouchableOpacity>
}
keyExtractor={item => item.id}
/>
</View>
);
}

Answer 1

If your requirement is to change the clicked item, the code would be like below.
You can get the index of the clicked item and change it.
function RenameSample() {
const data = [
{
id: '1',
name: 'test1',
},
{
id: '2',
name: 'test2',
},
{
id: '3',
name: 'test3',
},
];
const [stateUser, onChangeUser] = useState(data);
return (
<View>
<FlatList
data={stateUser}
renderItem={({ item, index }) => (
<TouchableOpacity
onPress={() => {
const newData=[...stateUser];
newData[index].name = 'changed';
onChangeUser(newData);
}}>
<Item name={item.name} />
</TouchableOpacity>
)}
keyExtractor={(item) => item.id}
/>
</View>
);
}