Unable to read the json object stored in React state - reactjs

Question

import React from 'react';
import axios from 'axios';
class Quiz extends React.Component {
constructor(props) {
super(props);
this.state = {
showInstruction: true,
questionIndex: 0,
isLoading: true,
questions: ''
};
}
proceedHandler = () => {
this.setState({
showInstruction: false
})
}
handleQuestion = (event) => {
event.preventDefault();
console.log('show next question');
}
componentDidMount() {
console.log("After mount! Let's load data from API...");
axios({
method: "GET",
url: "/apis/questions"
}).then(response => {
console.log(response.data);
this.setState({ questions: response.data });
this.setState({ isLoading: false });
});
}
render() {
if (this.state.showInstruction) {
return (
<div>
<h1>Welcome to Quiz</h1>
<p>Quiz instructions goes here</p>
<button type="button" onClick={this.proceedHandler}>Proceed</button>
</div>
)
}
const { isLoading, questions } = this.state;
console.log(this.state['questions'][0]);
console.log(questions[0]);
if (isLoading) {
return <div className="App">Loading...</div>;
}
return (
<div>
<form onSubmit={this.handleSubmit}>
<div onChange={this.onChangeValue}>
{/* {questions[0]} */}
</div>
<button onClick={this.handleQuestion}>Next</button>
</form>
</div>
)
}
}
export default Quiz;
My sample API content looks like the below. Right now making the api call to local file which is stored inside Public folder. Path is public/apis/questions.
[
{
id: 0,
question: `What is the capital of Nigeria?`,
options: [`New Delhi`, `Abuja`, `Aba`, `Onisha`],
answer: `Abuja`
},
{
id: 1,
question: `What is the capital of India?`,
options: [`Punjab`, `Awka`, `Owerri`, `Enugu`],
answer: `New Delhi`
}
]
I am building a quiz app and above is my code. I try to fetch the questions from api and render them one by one based on state. I am using axios to fetch the data inside componentDidMount and I can see the this.state.questions is updated with the questions array. But when I do questions[0] or this.state.questions[0], it always returns [. Any help would be greatly appreciated as I am fairly new the react development.

Answer 1

The issue is from my API data. I missed to wrap the keys with double quotes.
Updating the data from api call resolved my issue. So the sample api data will look like the below.
[
{
"id": 0,
"question": "What is the capital of Nigeria?",
"options": [
"New Delhi",
"Abuja",
"Aba",
"Onisha"
],
"answer": "Abuja"
},
{
"id": 1,
"question": "What is the capital of India?",
"options": [
"Punjab",
"Awka",
"Owerri",
"Enugu"
],
"answer": "New Delhi"
}
]