"Cannot read property 'map' of undefined" ReactJS and Lodash array

Question

I am trying to render out an array into the below JSX, using the below;

const events = this.state.event.map((item, i) => {

I can render out the arrays but it repeats the render function for each array. I only want it to output the one with an id equal to 1. When trying to implement Lodash _.find I can render out the array in the console using this;

const firstArray = _.find(this.state.event, function(o) { return o.id == 1; });
console.log(firstArray);

The following is my attempt at implementing the Lodash into the render method but when I run it i get the following error;

Uncaught TypeError: Cannot read property 'map' of undefined

Below is the code in the component

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from "jquery";
import lodash from "lodash";
import api from "../api.js";    

export default class EventRequest extends React.Component {
constructor(props) {
  super(props);

  this.state = {event: []};
}

componentDidMount() {
  this.EventGroup();
}
EventGroup() {

  return  $.getJSON(api.eventRequest).then((data) => {
    console.log(data);
    this.setState({ event: data.results });
  });
}

render() {
    const events = _.find(this.state.event, ['id', 1 ]).map((item, i) => {
    return <div>
    <div className="center-cards margin-top margin-bottom test-cardSecond">
      <div className="text-center margin-top">
        <h1 className="card-heading">Scottish Conference 2017</h1>
        <div className="card-sub">
          <div>{item.description}</div><br />
        </div>
      </div>
    </div>
      <div className="belowBoxTestSecond">
        <h1 className="bodyHeading">Example</h1>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <br /><br />
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <br />
        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br />
        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <br /><br />
        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      </div>
    </div>
  });

  return <div id="" className="">
    <div>{ events }</div>
  </div>
}
}

Boky Boky · Accepted Answer · 2017-10-05T09:43:56

This should do the trick:

const events = this.state.data.filter(data => data.id === 1).map(item => <div>{item.name}</div>;

The reason why you are getting Cannot read property 'map' of undefined is because your data is not fetched and you try to map it.

You could set loading flag to the state as follows:

this.state = {event: [], loading: true};

And the set it in EventGroup function after fetch done is to false:

this.setState({ event: data.results, loading: false });

And then in render method:

render(){
    if(this.state.loading){
         return <LoadingComponent />
    }

    // The rest of the code which will render if the data is fetched
}

Here is the fiddle.

"Cannot read property 'map' of undefined" ReactJS and Lodash array

3 Answers