title: React-Redux: mapping an array of objects and initializing a component from each
body: <p>I have a presentational component, , which takes a <code>{props}</code> object and populates itself with the proper values.</p>
  
  <p>I also have a container component, , which is supposed to map state to props, take the array of objects representing the plots, map it and initialize a  from each one.</p>
  
  <p>This is throwing me an error-<code>Uncaught (in promise) TypeError: Cannot read property 'name' of undefined</code>. The "name" in question is a property of the plot.</p>
  
  <p>Looking at the documentation, this error typically happens when we import a component with curly braces when we should import it without, but that's not the case here. </p>
  
  <p>I have a feeling that what is going on is that I am improperly passing the props to the  element, but am not sure of the right way to do it. </p>
  
  <p>Plot.js:</p>
  
  <pre><code>import React from 'react';
  
  const Plot = ({ props }) =&gt; {
      return (
          &lt;div className="media col-md-4"&gt;
              &lt;div className="media-left"&gt;
                  &lt;a href="#"&gt;
                      &lt;img className="media-object" src="http://placehold.it/200/550" alt="Placehold" /&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div className="media-body"&gt;
                  &lt;h4 className="media-heading"&gt;{props.name}&lt;/h4&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;strong&gt;Grower: &lt;/strong&gt; {props.grower}&lt;/li&gt;
                      &lt;li&gt;&lt;strong&gt;Region: &lt;/strong&gt; {props.region}&lt;/li&gt;
                      &lt;li&gt;&lt;strong&gt;Current State: &lt;/strong&gt; {props.currentState}&lt;/li&gt;
                      &lt;li&gt;&lt;strong&gt;Next State: &lt;/strong&gt; {props.nextState}&lt;/li&gt;
                      &lt;li&gt;&lt;strong&gt;Days To Next State: &lt;/strong&gt; {props.daysToNext}&lt;/li&gt;
                      &lt;br /&gt;
                      &lt;span class="pull-right"&gt;
                          &lt;i id="like1" class="glyphicon glyphicon-thumbs-up"&gt;&lt;/i&gt; &lt;div id="like1-bs3"&gt;&lt;/div&gt;
                          &lt;i id="dislike1" class="glyphicon glyphicon-thumbs-down"&gt;&lt;/i&gt; &lt;div id="dislike1-bs3"&gt;&lt;/div&gt;
                      &lt;/span&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default Plot;
  </code></pre>
  
  <p>Dashboard.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import * as actions from '../actions';
  import Plot from './plot';
  
  class Dashboard extends Component {
      componentWillMount() {
          this.props.fetchMessage();
          this.props.fetchPlots();
      }
  
      render() {
          const plots = this.props.plots;
          return (
              &lt;div&gt;
                  &lt;span&gt;{this.props.message}&lt;/span&gt;
                  &lt;div className='container'&gt;
                          &lt;div className="row"&gt;
                              {plots &amp;&amp; plots.map((plot) =&gt; &lt;Plot key={plot._id} name={plot.name} grower={plot.grower} region={plot.region} currentState={plot.currentState} nextState={plot.nextState} daysToNext={plot.daysToNext}/&gt;)}
                          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          message: state.auth.message,
          plots: state.auth.plots
      }
  }
  
  export default connect(mapStateToProps, actions)(Dashboard);
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>This is fetchPlots(). I know that it's working and that plots are available as props, because when I add a console.(log) statement before the return statement in dashboard.js, I can see them, and they're fine, with all necessary properties.</p>
  
  <pre><code>export function fetchPlots() {
      return function (dispatch) {
          axios.get(`${ROOT_URL}/plots`, {
              headers: {
                  authorization: localStorage.getItem('token')
              }
          })
              .then(response =&gt; {
                  dispatch({
                      type: FETCH_PLOTS,
                      payload: response.data
                  });
              });
      }
  }
  </code></pre>
  
  <p>My reducer:</p>
  
  <pre><code>import {AUTH_USER, UNAUTH_USER, AUTH_ERROR, FETCH_MESSAGE, FETCH_PLOTS} from '../actions/types';
  
  export default function(state={}, action){
      switch(action.type){
          case AUTH_USER:
              return{...state, error:'',authenticated:true};
          case UNAUTH_USER:
              return{...state, authenticated:false};
          case AUTH_ERROR:
              return { ...state, error: action.payload };
          case FETCH_MESSAGE:
              return { ...state, message: action.payload }
          case FETCH_PLOTS:
              return { ...state, plots: action.payload }
      }
      return state;
  </code></pre>