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?

ummahusla · Accepted Answer · 2018-10-09 13:49:52Z

2

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

answered Oct 9, 2018 at 13:49

ummahusla

2,0593 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tu Nguyen · Accepted Answer · 2018-10-09 13:58:36Z

2

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>
      );
    })
  }

answered Oct 9, 2018 at 13:58

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

2 Comments

Gabriel Teixeira Over a year ago

yeah the whole problem was actually the setState! thanks man!

Tu Nguyen Over a year ago

@GabrielTeixeira I'm glad to hear that

Hemadri Dasari · Accepted Answer · 2018-10-09 14:27:39Z

2

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>

answered Oct 9, 2018 at 14:27

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

1 Comment

Hemadri Dasari Over a year ago

You are welcome. Kindly do upvote and accept which ever solution helped you resolving the issue. So that it will help future readers

Lars Holdaas · Accepted Answer · 2018-10-09 13:54:18Z

1

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.

answered Oct 9, 2018 at 13:54

Lars Holdaas

7581 gold badge4 silver badges28 bronze badges

Comments

Adrian Pascu · Accepted Answer · 2018-10-09 13:55:13Z

1

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);
     .......
}

answered Oct 9, 2018 at 13:55

Adrian Pascu

1,0497 gold badges25 silver badges54 bronze badges

Comments

Marik Sh · Accepted Answer · 2018-10-09 13:58:12Z

1

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

answered Oct 9, 2018 at 13:58

Marik Sh

7413 gold badges9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'map' of undefined REACT

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related