reactjs - Can't access property in render method of React

Question

I'm trying to access a property of the array I get from the json file, but because I'm using Component DidMount it seems like I can't, and it says it is undefined. I'm trying to access perguntas[0] inside of the render method.

import React, {Component} from 'react';
import './App.css';
import Pergunta from './Pergunta';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
        perguntas: undefined,
        isLoaded: false
    }
  }


  componentDidMount = () => {
    fetch('http://127.0.0.1:8000/api/perguntas')
        .then(res => res.json())
        .then(json => this.setState({
                perguntas: json.data,
                isLoaded: true
        }))
  }

  componentDidUpdate() {
      console.log(this.state.perguntas)
  }

  /*
    sortear = (perguntas) => {
        let randomIndex = Math.floor(Math.random() * 10);

        return perguntas[randomIndex]
    }*/

    render() {
            const {perguntas} = this.state
            //let pergunta = this.sortear(perguntas)

            return (
                // testes...

                <div>
                    <div>{JSON.stringify(perguntas[0])}</div>
                </div>


                //<Pergunta pergunta={ perguntaRandom['id'] }/>
            )
        }

}

export default App;

question from:https://stackoverflow.com/questions/65909864/cant-access-property-in-render-method-of-react

Answer 1

I found the solution, it's the first if statement inside render() method.

render() {
        const {perguntas, isLoaded} = this.state
        if (!isLoaded) {
            return <div>Loading...</div>
        }
        else {
            let randomIndex = Math.floor(Math.random() * 10)
            let pergunta = perguntas[randomIndex]
            let texto = pergunta.texto
            let opcao1 = pergunta.opcao1
            let opcao2 = pergunta.opcao2
            let opcao3 = pergunta.opcao3
            let opcao4 = pergunta.opcao4
            //let imagem = pergunta.urlImagem

            return (
                <Pergunta texto={texto} opcao1={opcao1} opcao2={opcao2} opcao3={opcao3} opcao4={opcao4}/>
            )
        }
    }