State is null initially after using get request in componentDidMount

Question

I have a react component where I want to get some data, using componentDidmount to get the data initially:

componentDidMount(){
axios.get('https://opentdb.com/api.php?amount=50').then( response =>{
for(var key in response.data.results){

    const question = [...this.state.question, response.data.results[key].question];
    const answer = [...this.state.answer, response.data.results[key].correct_answer];
    const wrongAnswers = [...this.state.wrongAnswers, response.data.results[key].incorrect_answers];
    this.setState( prevState => ({
        question: question,
        answer: answer,
        wrongAnswers: wrongAnswers
 }));    
 }
  });
 }

the problem is that I can't map the answers of wrongAnswers because they are undefined initially

  const {wrongAnswers} = this.state;
 {wrongAnswers[this.state.random] && this.state.wrongAnswers[this.state.random].map((wrongAnswer, index) => { //this does not display 
<p key={'Key-'+index}>here it is= {wrongAnswer}</p>
  })}

I tried making some checks to see when gets rendered what

 {this.state.wrongAnswers &&
console.log('the state is ' +this.state.wrongAnswers[this.state.random]);
} //this renders undefined initially, then renders an array of the right answers..

what is strange is that, if I just display the state, without performing any operations, it is displayed correctly.

  <p>{this.state.question[this.state.random]}</p> // displays the state correctly

  <p>{this.state.wrongAnswers[this.state.random]}</p> //displays the state correctly

I suspect, that I can't perform any operations, because it is not loaded initially, but since I put it in componentDidMount, you would suspect, that this problem would not occur?

EDIT:

whenever i put in the conditions for a simply parapragh

{this.state.random !== undefined && this.state.wrongAnswers[this.state.random] !== undefined &&

    <p> condition is met </p>

  }

it prints out

but when i map the array:

  {this.state.random !== undefined && this.state.wrongAnswers[this.state.random] !== undefined && this.state.wrongAnswers[this.state.random].map((wrongAnswer, index) => {
      console.log('inside the right method!'); //logs correctly three times like intended but does not print any jsx
    <p key={'Key-'+index}>here it is= {wrongAnswer}</p>

  })}

nothing is printed out.

`componentDidMount` will initiate the request and lifecycle will continue on to render before request has completed — charlietfl, Dec 02 '18 at 11:33
But how can i make so it displays after it get the data, the condition met, will always be false, no matter how many times the UI re renders? — Kristoffer Tølbøll, Dec 02 '18 at 11:34

Bhojendra Rauniyar · Accepted Answer · 2018-12-02T12:05:34.523

You stated that <p>{this.state.wrongAnswers[this.state.random]}</p> works when placed inside the render hook. It means you will always get wrongAnswers ie. not undefined and invoking on wrongAnswers array of the state, there will be no error at initial render and it gets correct result at next render.

But using this code in componentDidMount hook,

{
  this.state.wrongAnswers &&
  console.log(this.state.wrongAnswers[this.state.random]);
}

At first time, it will obviously get the undefined because at that time this.state.random might be undefined or null and due to this reason, you will get undefined. For example:

const arr = [1,2,3]
console.log(arr[undefined]) // undefined
console.log(arr[null]) // undefined

Thus, I would suggest you to check the random state first and then use wrongAnswers with it:

{
  this.state.random &&
  console.log(this.state.wrongAnswers[this.state.random]);
}

The following will be unnecessary as wrongAnswers are not undefined at initial state as you stated. If you have not set wrongAnswers at initial state, then only the following is a way to do so:

{
  this.state.wrongAnswers &&
  this.state.random &&
  console.log(this.state.wrongAnswers[this.state.random]);
}

Sorry, I didn't figured out before your edit. But you need to use return statement while inside the map since you're using curly brace:

return <p>...</p>

You may also be interested to look in this post for further help, to know when to use return and when not to.

Thank you for your answer the issue is that even if i make both conditions, it does no render anything — Kristoffer Tølbøll, Dec 02 '18 at 11:42
{this.state.random && this.state.wrongAnswers[this.state.random].map((wrongAnswer, index) => { console.log('inside the right method!');
here it is= {wrongAnswer}
})} — Kristoffer Tølbøll, Dec 02 '18 at 11:42
You'll also need to assure `this.state.wrongAnswers[this.state.random]` is not `undefined` before using map. — Bhojendra Rauniyar, Dec 02 '18 at 11:43
I tried this, and the conditions are when i just display a simple paragraph, but i won't work when i map the array (i will edit the question) — Kristoffer Tølbøll, Dec 02 '18 at 11:49

State is null initially after using get request in componentDidMount

1 Answers1