Flatlist doesn't render an array of Objects - react-native

Question

Hello everybody i'm trying to render a list of objects to rapresent some letters, taken from a custom keyboard. my flatlist look like this:
<FlatList
horizontal={true}
data = {keyList}
renderItem = {({item}) =>
<View style={styles.singleBlock}>
<Text style={styles.textBlock}>{item.letter}</Text>
</View>
}
keyExtractor = {myKey}
/>
the data is taken from my state:
const [keyList, setKeyList] = useState([
{
'letter': "",
'state': "nonIndovinato",
'id': 1
},
{
'letter': "",
'state': "Indovinato",
'id': 2
},
{
'letter': "",
'state': "Indovinato",
'id': 3
},
{
'letter': "",
'state': "Indovinato",
'id': 4
},
{
'letter': "",
'state': "Indovinato",
'id': 5
}
]);
and updated by update function:
const updateData = (key) => {
const index = keyList.findIndex(item => item.id === key.id);
if(index === -1) return;
const item = keyList[index];
const updatedItem = {...item, letter: key.letter};
const updatedArray = keyList;
updatedArray[index] = updatedItem;
setKeyList(updatedArray);
};
the key value is something as follow:
{
'letter': 'A',
'id': 1
}
the data i see with console.log is right, for example if i press T it look like this:
{letter: 'T', state: 'nonIndovinato', id: 1},
{letter: '', state: 'Indovinato', id: 2},
{letter: '', state: 'Indovinato', id: 3},
{letter: '', state: 'Indovinato', id: 4},
{letter: '', state: 'Indovinato', id: 5}
the application look like this: https://i.stack.imgur.com/JhQiq.jpg
the upper part is the structure where it should be displayed the data, the lower is the expected result with mockup data.
if you need the style:
singleBlock: {
backgroundColor: 'grey',
width: width/6,
justifyContent: 'center',
alignItems: 'center',
margin: 1,
marginTop: '5%',
marginBottom: '5%',
marginRight: 2,
borderRadius: 1
},
textBlock: {
color: 'white',
fontSize: width/10,
fontWeight: 'bold'
}
Thanks to anyone who can help :)

Answer 1

The way you are updating your state is not correct. Try the following.
const updateData = (key) => {
const index = keyList.findIndex(item => item.id === key.id);
if(index === -1) return;
const item = keyList[index];
const updatedItem = {...item, letter: key.letter};
let updatedArray = [...keyList];
updatedArray[index] = updatedItem;
setKeyList(updatedArray);
};