I am building my first react app for my final react course on scrimba and I am retrieving data from an API and setting a part of the data to an array set in state, but I cant seem to access a property of the array
import React from 'react'
const [request, setRequest] = React.useState([])
React.useEffect (() => {
fetch('https://opentdb.com/api.php?amount=5')
.then(res => res.json())
.then(data => setRequest(data.results.map(({ question, correct_answer, incorrect_answers }) => ({question, correct_answer, incorrect_answers}))))
}, [])
console.log(request[0]) // returns the first object array
console.log(request[0]["question"]) // gives an error
console.log(requst[0].question) // gives an error<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>but I cant seem to access a property of the array
Sure you can, but only when that array element exists. The initial state of the array is empty:
const [request, setRequest] = React.useState([])
An empty array has no elements, so this logs undefined to the console:
console.log(request[0])
And then this produces an error:
console.log(request[0]["question"])
And then this does not produce an error, because it isn't executed, because the line before it produced an error:
console.log(requst[0].question)
But if that line of code was executed, it too would produce an error.
The data you're fetching to populate state is coming from an asynchronous operation. So it's going to happen at some later time. (Could be milliseconds and feel instantaneous, but still some later time.)
Until that data has been fetched and until the state has been updated, the code needs to be able to handle the initial state of the empty array. Optional chaining is one option:
console.log(requst[0]?.question)
Or perhaps wrapping the whole thing in a conditional:
if (request.length > 0) {
console.log(request[0]);
console.log(request[0]["question"]);
console.log(requst[0].question);
}
How you prefer to handle an empty array is up to you and the logic you're implementing. But the point is that since you define an empty array, the code should expect to start with an empty array.
Setting data inside request state takes time. So you always get undefined for the first log of console.log(request[0]) and error for other two console.logs.
In that case, you can check by using UseEffect hook.
useEffect(() => {
if(request.length === 0) return;
console.log(request[0]); // returns the first object array
console.log(request[0]['question']);
console.log(requst[0].question);
}, [request]);
If you don't want to use useEffect, you can use ? to access object properties without error.
console.log(request[0]);
console.log(requst[0]?.question);
if (request !== undefined && request.length > 0) {
console.log(request[0])
console.log(request[0]["question"])
console.log(request[0].question)
}