Typeerror: Cannot read Property 'map' of Undefined

Question

Hello, I’m starting with Act. I have the following structure

import React, { Component } from "react";
class Dezena extends Component {
  render() {
    return (
      <td
        className={
          this.props.foiSorteada
            ? "dezena-em-bola numero-sorteado"
            : "dezena-em-bola numero-nao-sorteado"
        }
      >
        {this.props.nuDezena}
      </td>
    );
  }
}
export default Dezena;

import React, { Component } from "react";

import Dezena from "./Dezena";

class Jogo extends Component {
  render() {
    return (
      <div>
        <h3>Acertos: {this.props.resultado.nuAcertos}</h3>
        <tr>
          {this.props.resultado.dezenas.map(dezena => (
            <Dezena
              key={dezena.nuDezena}
              nuDezena={dezena.nuDezena}
              foiSorteada={dezena.foiSorteada}
            />
          ))}
        </tr>
      </div>
    );
  }
}
export default Jogo;

import React, { Component } from "react";

import Jogo from "./Jogo";

class Resultado extends Component {
  render() {
    return (
      <div>
        <h2>Resultado</h2>
        <table className="table table-condensed">
          <tbody>
            {this.props.resultado.map((resultado, key) => {
              return <Jogo resultado={resultado} />;
            })}
          </tbody>
        </table>
      </div>
    );
  }
}
export default Resultado;

import React, { Component, Fragment } from "react";

import axios from "axios";
import Loading from "../componentes/Loading";
import Resultado from "./Resultado";

import retorno from "../cliente/Resultados.json";

class ResultadoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carregando: true,
      resultado: []
    };
  }
  componentDidMount() {
    // console.log("Retorno do json > ", retorno)
    // this.setState({resultado: retorno, carregando: false })
    axios
      .get(`http://localhost:8080/mylottery/resultados/lotofacil/1817`)
      .then(response => {
        console.log("Retorno do servidor > ", response.data);
        this.setState({ resultado: response.data, carregando: false });
      })
      .catch(error => {
        console.error(error);
      });
  }
  render() {
    return (
      <Fragment>
        <div className="container">
          <Loading
            loading={this.state.carregando}
            message="Carregando resultado..."
          />
          {
            <Resultado resultado={this.state.resultado} />
            // this.state.resultado
          }
        </div>
      </Fragment>
    );
  }
}
export default ResultadoList;

This way makes a mistake

commenting on the part

//<Resultado resultado={this.state.resultado}/>
   this.state.resultado

if I use direct a mock

[
     {
        "nuConcurso":1812,
        "dtSorteio":"10/05/2019",
        "dezenas":[
           {
              "nuDezena":1,
              "foiSorteada":false
           },
           {
              "nuDezena":3,
              "foiSorteada":false
           },
         // ...
        ],
        "nuAcertos":9
     },
     {
        "nuConcurso":1812,
        "dtSorteio":"10/05/2019",
        "dezenas":[
           {
              "nuDezena":2,
              "foiSorteada":true
           },
           {
              "nuDezena":5,
              "foiSorteada":false
           },
      // ...
        ],
        "nuAcertos":10
     },
     {
        "nuConcurso":1812,
        "dtSorteio":"10/05/2019",
        "dezenas":[
           {
              "nuDezena":2,
              "foiSorteada":true
           },
           {
              "nuDezena":3,
              "foiSorteada":false
           },
       // ...
        ],
        "nuAcertos":10
     }
     ]

Altering the

componentDidMount() {
//  console.log("Retorno do json > ", retorno)
this.setState({resultado: retorno, carregando: false  })
/*axios.get(`http://localhost:8080/mylottery/resultados/lotofacil/1817`)
   .then(response => {
      console.log("Retorno do servidor > ", response.data)
      this.setState({resultado: response.data, carregando: false })
      }).catch((error) => {
         console.error(error);
      })
  }*/

stay straight

I don’t know how to fix it, I’ve looked everywhere and nothing