dimanche 5 avril 2020

react js passing props give an error '“undefined is not iterable”'

I am quite newbie in react. I am trying to pass a prop to another component.

Something weird is happening: _ when i am passing the date to MapLeaflet2, it works perfectly. _ when i am passing it to MapContainer, it does not work. : i get this error :

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Why it would work with MapLeaflet2 and not with MapContainer? The error message is not really helping, because date is not undefined (proof is that it works with MapLeaflet2 ).

import React, { Component } from 'react';
import DateTimePicker from 'react-datetime-picker';
import MapLeaflet2 from './MapLeaflet2';
import MapContainer from './MapContainer';

class Picker extends Component {
  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date },
    function(){

      const DateContext =this.state.date

    })

  render() {

    return (

      <div>
        <DateTimePicker
          onChange={this.onChange}
          value={this.state.date}
        />
         <MapLeaflet2 date = {this.state.date.toString()}/>
         <MapContainer date = {this.state.date.toString()}/>

         )}         
      </div>
    );
  }
}

export default Picker;

here i am copying the MapContainer :

import React, { Component } from 'react';
import MapLeaflet from './MapLeaflet';

class MapContainer extends Component {
  render() {
    const {
      stationsToDisplay,
      displayFeature,
      updateFavStationsList,
      handleFavList,
      geolocationError,
      getCurrentPosition,
      userPosition,
      isUserLocated,
      readStoredFav
    } = this.props;

    return (
      <div id="mapContainer" className="container">
        <MapLeaflet
          stationsToDisplay={stationsToDisplay}
          displayFeature={displayFeature}
          updateFavStationsList={updateFavStationsList}
          handleFavList={handleFavList}
          geolocationError={geolocationError}
          getCurrentPosition={getCurrentPosition}
          userPosition={userPosition}
          isUserLocated={isUserLocated}
          readStoredFav={readStoredFav}
        />
      </div>
    );
  }
}
export default MapContainer;

As mentionned, it's all new, so any observations or suggestions or observations would be really helpful !




Aucun commentaire:

Enregistrer un commentaire