title: React pass date as props : "undefined is not iterable"
body: <p>I am a noob in React. 
  I am trying to get a variable that comes from another component.</p>
  
  <p>this is in a js file for the MapLeaflet component</p>
  
  <pre><code>const date = props =&gt; {
    return (
      props.date);
  };
  </code></pre>
  
  <p>And the first component (the one where the variable is date is created) is :</p>
  
  <pre><code>import React, { Component } from 'react';
  import DateTimePicker from 'react-datetime-picker';
  import MapLeaflets from './MapLeaflet';
  
  
  class Picker extends Component {
    state = {
      date: new Date(),
    }
  
    onChange = date =&gt; this.setState({ date },
      function(){
        console.log("this works: " + this.state.date);
        //const DateContext = React.createContext(this.state.date);
        const DateContext =this.state.date
  
  
      })
  
    render() {
  
      return (
  
        &lt;div&gt;
          &lt;DateTimePicker
            onChange={this.onChange}
            value={this.state.date}
          /&gt;
           { console.log(this.state.date) }
           &lt;MapLeaflets date = {this.state.date}
           /&gt;
           )}         
        &lt;/div&gt;
      );
    }
  }
  
  export default Picker;
  </code></pre>
  
  <p>Here is my log error : </p>
  
  <blockquote>
    <p>TypeError: undefined is not iterable (cannot read property
    Symbol(Symbol.iterator))</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/acajz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/acajz.png" alt="enter image description here"></a>
  I have extensively searched stackoverflow. This appears to be a pretty simple problem, yet it does not work here. I can read use child/parents, or context, but i did not manage to make it work. I did not try redux, but i guess this would be overkill to just pass a props.</p>
  
  <p>Any observation or suggestion would be valuated. </p>
  
  <hr>
  
  <h2>EDIT</h2>
  
  <p>Thanks for your answer. Actually the error log comes from this line in the first component : </p>
  
  <pre><code> &lt;MapLeaflets date = {this.state.date}
   /&gt;
  </code></pre>
  
  <p>Does anybody knows why it does not work ? </p>
  
  <p>I am editing also to include a part of the mapleaflet component, just so you understand what i want to do with this date.  </p>
  
  <pre><code>  refreshStationsList() {
      const { updateFavStationsList, readStoredFav } = this.props;
      // console.log('refresh');
      const date = (props) =&gt; {
    return (
        &lt;div&gt;{props.date}&lt;/div&gt;
    )
  }
  const request = `https:url`+date;
  this.setState({ isLoading: true });
  
  const favStationsId = readStoredFav();
  
  axios.get(request)
    .then(result =&gt; {
      const stationsList = result.data.map(
        station =&gt; {
          const isFavorite = favStationsId.includes(station.number);
          return { ...station, isFavorite: isFavorite }
        }
      );
      this.setState({
        stationsList: stationsList,
        isLoading: false
      })
      updateFavStationsList(stationsList);
    })
    .catch(error =&gt; this.setState({
      apiDataError: error,
      isLoading: false
    }));
    }
  
    render() { ....etc 
  </code></pre>