Adding key in spread operator inside a loop - reactjs

Question

I have a state like:
this.state = {
questionListData: [
{
id: 1,
question: "Who was the first man to step on Moon?",
options: [
{
opt: "Abdul Kalam"
},
{
opt: "Albert Einstein"
},
{
opt: "Sheldon Cooper"
},
{
opt: "Salman Khan"
}
]
},
{
id: 2,
question: "Who was the Second man to step on Moon?",
options: [
{
opt: "Abdul Kalam2"
},
{
opt: "Albert Einstein2"
},
{
opt: "Sheldon Cooper2"
},
{
opt: "Salman Khan2"
}
]
},
{
id: 1,
question: "Who was the Third man to step on Moon?",
options: [
{
opt: "Abdul Kalam3"
},
{
opt: "Albert Einstein3"
},
{
opt: "Sheldon Cooper3"
},
{
opt: "Salman Khan3"
}
]
},
{
question: "Who was the Fourth man to step on Moon?",
options: [
{
opt: "Abdul Kalam"
},
{
opt: "Albert Einstein"
},
{
opt: "Sheldon Cooper"
},
{
opt: "Salman Khan"
}
]
}
]
};
I am dynamically adding to this list of questions under the questionListData array. While adding, id is not generated as it is user defined. So i want to automatically add an id if it is not there. for that i had done this:
this.state.questionListData.map((r,u)=>{
console.log('new r',r)
if(!this.state.questionListData[u].id){alert('!r.id')
this.setState({...this.state.questionListData[u], id:u+1 })
}
})
But if I do this, id is not added in that perticular index of the questionListData array, but outside it, like so:
questionListData:[
"id":4
{"id":1,
"question":"Who was the first man to step on Moon?",
"options":[
{"opt":"Abdul Kalam"},
{"opt":"Albert Einstein"},
{"opt":"Sheldon Cooper"},
{"opt":"Salman Khan"}
]
}
]
Please help me with the correct syntax of spread operator to add the id to that pwrticular index inside this.setState. Thanks.

Answer 1

Yes because you're adding id in your state and not in your list object in your state.
const newList = this.state.questionListData.map((obj, idx) => {
if(!obj.id){
obj.id = idx + 1;
}
return obj;
});
this.setState({ questionListData: newList });

Answer 2

You can do it like this:
const newList = this.state.questionListData.map((item, index) => {
if (!item.id) {
return {
...item,
id: index + 1
}
}
return item;
})
this.setState({questionListData: newList});