React inserting data to a nested array - arrays

Question

I am doing a school project where i have to insert data to a nested array. I am able to insert data to a normal array. But i dont know how to insert to a nested array. As you see at the image answers is the nested array. I need to be able to insert data into name and votes that belongs to the nested array called answers. If you need more code, let me know!
Now for the code:
App.js
import React, { Component } from "react";
import { Router } from "#reach/router";
import Question from "./components/pages/Question";
import Questions from "./components/pages/Questions";
import Nav from "./components/layout/Nav";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";
import Ask from "./components/pages/Ask";
import Home from "./components/pages/Home";
export class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
id: 1,
name: "nd time giving error,during TENSORFLOW execution",
answers: [
{
name:
"Observables are lazy so you have to subscribe to get the value.",
votes: 5
},
{ name: "You can use asyncPipe", votes: -2 },
{
name:
"The reason that it's undefined is that you are making an asynchronous operation",
votes: 3
}
]
},
{
id: 2,
name: "Is there a way to add/remove module in Android.bp?",
answers: [
{ name: "Answer 1", votes: 2 },
{ name: "Answer 2", votes: 3 },
{ name: "Answer 3", votes: 0 }
]
},
{
id: 3,
name: "Primeng p-dropdown filtering suggestions problem",
answers: [
{ name: "Answer 1", votes: 0 },
{ name: "Answer 2", votes: 1 }
]
},
{
id: 4,
name: "Configure CakePhp to send mail with SMTP",
answers: [
{ name: "Answer 1", votes: 0 },
{ name: "Answer 2", votes: 1 }
]
},
{
id: 5,
name: "CSS not working",
answers: [
{ name: "Answer 1", votes: 0 },
{ name: "Answer 2", votes: 1 }
]
}
]
};
}
getQuestion(id) {
return this.state.data.find(q => q.id === Number(id));
}
//This work, but only able to insert into data. Not answers
addQuestion(question) {
const questionObject = {
id: Math.random() * 10000000,
name: question,
answers: []
};
this.setState({
data: [...this.state.data, questionObject]
});
}
//With answerData, we can recieve the data to the parent, from the child.
//We get data from question. What the user have answered
getAnswer = answerData => {
//Last element in the array is the id from the question
const answerObject = {
name: "some-test-name",
answers: []
};
//Need to find the questionID, so we can parse the question to to the right answers
const getQuestionId = this.state.data.find(q => q.id === 1);
this.setState({
//This wont work...I am tryning to find the question that the answer belongs to.
answers: [...this.state.data.find(x => x.id === 1, answerObject)]
});
};
render() {
return (
<div className="App">
<Nav></Nav>
<Router>
<Ask
path="/Ask"
addQuestion={question => this.addQuestion(question)}
></Ask>
<Questions
path="/"
data={this.state.data}
askQuestion={text => this.askQuestion(text)}
></Questions>
<Question
path="/question/:id"
getQuestion={id => this.getQuestion(id)}
getAnswer={getAnswer => this.getAnswer(getAnswer)}
></Question>
</Router>
</div>
);
}
}
export default App;

Answer 1

All you need to keep track of your loop. Consider data is object.
let data = {
data: [
{
id: 1,
name: "nd time giving error,during TENSORFLOW execution",
answers: [
{
name: "Observables are lazy so you have to subscribe to get the value.",
votes: 5
},
{
name: "You can use asyncPipe",
votes: -2
},
{
name: "The reason that it's undefined is that you are making an",
votes: 3
}
]
}
]
}
Now you need to add some value to first object of answers array. You can do it like this
for(let obj of data.data) {
obj.answers[0]['isData'] = true;
console.log(obj.answers[0]);
}
isData property will be added into obj.answers[0].
And if you need to update the existing name or vote property, just override them.
for(let obj of data.data) {
obj.answers[0]['name'] = 'new name';
}

Answer 2

It didnt work, can some one help rewrite this method. postAnswer
postAnswer(questionID, name) {
const answerObject = {
name: name,
id: questionID
};
this.setState({
answers: [...this.state.data.find(x => x.id === questionID), answerObject]
});
//console.log(questionID, name);
}