ReactJS | Concat Arrays Inside Of Object - arrays

Question

im currently working on a React JS App and i have an Array which has Objects in it, and inside the Objects it has Arrays.
Here's the code first,
constructor() {
super();
this.state = {
namaSantri: null,
examTitle: 'PLP BAHAS Arab Talaqqi',
examLevel: 0,
examType: 'Ujian 1 Tulis',
vocabQ: [{questionTitle: 'Question Title', question: ['Question 1', 'Question 2']}],
};
}
componentDidMount(){
var questionEx = {questionTitle: 'Question Title2', question: ['Question 1']}
var anotherArray = ['Question 2']
var addIndex = questionEx.question.concat(anotherArray)
this.setState({
vocabQ: [...this.state.vocabQ, addIndex]
})
}
So i have an Array whis is vocabQ here, and it contains Objects which contains my QuestionTitles and my Questions Array.
I want to create an input program for the Quesiton Object ( that contains questionTitle and questions ) here, so i tried to concat my array at addIndex but it show nothing. Help?
My render,
render() {
/**SOMETHING THAT YOU NEED TO WRITE TO OUTPUT AN ARRAY? */
const map = this.state.vocabQ.map((d) => <p key={d.questionTitle}>{d.questionTitle} {d.question}</p>);
return (
<div /**DIV PAGE START */
className="App">
<div /**DIV HEADER START */
className="DivHeader">
<Center>
<p className="ExamTitle">{this.state.examTitle}</p>
</Center>
<Center>
<p className="ExamLevel">Level {this.state.examLevel}</p>
</Center>
<Center>
<p className="ExamType">{this.state.examType}</p>
</Center>
<Center>
<div className="NameInput">
<InputText value={this.state.namaSantri} onChange={(e) => this.setState({value: e.target.namaSantri})} />
{/**HERE IS WHERE THE ARRAY SHOULD BE */}
<span> {map}</span>
</div>
</Center>
{/**DIV HEADER END */}
</div>
<div /**DIV VOCAB QUESTIONS START */>
{/**DIV VOCAB QUESTIONS END */}
</div>
{/**DIV PAGE END*/}
</div >
);
}
NB: It only show "Question Title Question 1Question 2"
image

Answer 1

Try it like this:
componentDidMount(){
var questionEx = {questionTitle: 'Question Title2', question: ['Question 1']}
var anotherArray = ['Question 2']
var addIndex = questionEx.question.concat(anotherArray)
this.setState({
vocabQ: [...this.state.vocabQ, ...addIndex] //<----This "..." is the part that has changed
})
}
You basically have to use the spread operator on both arrays in order for it to work the way you want to. Head to https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operatorhttps://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operator to learn a bit more about that.