Cannot read property 'map' of undefined REACT

Question

constructor(){
    super();
    this.state = {
        lista: [],
    }
}      

componentDidMount(){
    fetch('http://lospraianos-env-1.qu3skpxsmw.sa-east-1.elasticbeanstalk.com/api/materials')
      .then(response => response.json())
      .then(resData => {
        this.setState( {data: resData.results});
      })

}

<div>
  <table className="pure-table">
    <thead>
      <tr>
        <th>id</th>
        <th>Produto</th>
        <th>Quantidade</th>
      </tr>
      </thead>
        <tbody>{
          this.props.lista.map(function(data){
            return (  
              <tr key={data.codMat}>
                <td>{data.codMat}</td>
                <td>{data.material}</td>
                <td>{data.qntMin}</td>
              </tr>
              );
            })
            }
        </tbody>
  </table>
</div>

I'm trying to get info from the API and make a table with it but I'm getting some errors.

Cannot read property 'map' of undefined

how can I deal with it?

Answer 1

I'd recommend doing a conditional rendering here, by checking lista property first, before mapping all data.

{
          this.props.lista && this.props.lista.map(function(data){
            return (  
              <tr key={data.codMat}>
                <td>{data.codMat}</td>
                <td>{data.material}</td>
                <td>{data.qntMin}</td>
              </tr>
              );
            })
            }

As well as you have a error in

this.setState( {data: resData.results});

As you need to set state for lista:resData.results , not data

Answer 2

You're setting this. state .lista to contain array data.

You're trying to map over this. props .lista.

this.state !== this.props.

Change this.props.lista.map to this.state.lista.map and it should work.

Answer 3

There are several problems with your codes. Try to fix these:

 constructor(props) {  //fixed
    super(props);  //fixed
    this.state = {
      lista: []
    };
  }

  componentDidMount() {
    fetch(
      'http://lospraianos-env-1.qu3skpxsmw.sa-east-1.elasticbeanstalk.com/api/materials'
    )
      .then(response => response.json())
      .then(resData => {
        this.setState({ lista: resData.results });   //fixed
      });
  }

and...

  {
    this.state.lista.length > 0 && this.state.lista.map(function(data) {   //fixed
      return (
        <tr key={data.codMat}>
          <td>{data.codMat}</td>
          <td>{data.material}</td>
          <td>{data.qntMin}</td>
        </tr>
      );
    })
  }

Answer 4

You are setting response to a state variable data which doesn't exist in your code. You need to set it to lista instead of data in fetch Api call like

    this.setState({lista : resData.results});

And here do conditional check and do .map

.map without return

  <tbody>{
      this.props.lista && this.props.lista.map(data => (
          <tr key={data.codMat}>
            <td>{data.codMat}</td>
            <td>{data.material}</td>
            <td>{data.qntMin}</td>
          </tr>
        ))
        }
    </tbody>

.map with return

  <tbody>{
      this.props.lista && this.props.lista.map(data => {
          return (<tr key={data.codMat}>
            <td>{data.codMat}</td>
            <td>{data.material}</td>
            <td>{data.qntMin}</td>
          </tr>)
        })
        }
    </tbody>

Answer 5

I see that you've set the initial state with that array lista[] . Do you have one array like that passed as a prop as well? If yes check for typos and you might also want to use the constructor with the props argument that you will pass in the super call like so

constructor(props){
     super(props);
     .......
}

Answer 6

As far as i can see, there are 2 problems with the given code,

the first one:

You are running the Array.prototype.map() on this.props.lista , when the actual array is this.state.lista

Also, componentDidMount() runs after the render() function, so either move the fetch() to the constructor or set a condition for you map function

Read https://reactjs.org/docs/react-component.html#mounting for better understanding of React.component's lifecycles