How to change value from array of object on drop down list selection ReactJS

Question

On page load I get the value somewhat like this

{
...,
 "availabilities": [
      {
        "date": "2017-09-22",
        "start_time": "07:45 AM",
        "map_img_url": "gogia_event_maps.jpg",
        "redirect_url": "someplace,
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"

      },
      {
        "date": "2017-10-15",
        "start_time": "07:45 AM",
         "map_img_url": "gogia_event_maps.jpg",
      "redirect_url": "/Raheja+Acropolis+2",
      "lat": "19.0480326",
      "lng": "72.9169889",
      "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      },
      {
        "date": "2017-10-21",
        "start_time": "05:01 AM",
         "map_img_url": "gogia_event_maps.jpg",
      "redirect_url": "https://www.google.co.in/maps/place/Raheja+Acropolis+2",
      "lat": "19.0480326",
      "lng": "72.9169889",
      "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      },
      {
        "date": "2017-10-22",
        "start_time": "05:02 AM",
         "map_img_url": "/gogia_event_maps.jpg",
      "redirect_url": "Raheja+Acropolis+2",
      "lat": "19.0480326",
      "lng": "72.9169889",
      "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      }],
...
}

and my UI has a select component from where user can select different date form above JSON. All I need is my remaining UI component should also change the according to the selection of date?

Answer 1

I think what you're asking if for a element that updates state when you change it. I think you're problem is that you're trying to put the whole object in the array from state. But you should just filter through the array on the output to display the correct values.

class SlectElement extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      availabilities: []
    }
    this.updateAvailabilities = this.updateAvailabilities.bind(this);
  }

  updateAvailabilities(e) {
    const stateCopy = Object.assign({}, this.state);
    stateCopy.availabilities = e.target.value;
    return this.setState(stateCopy);
  }

  render() {

    const availabilities = [
      {
        "date": "2017-09-22",
        "start_time": "07:45 AM",
        "map_img_url": "gogia_event_maps.jpg",
        "redirect_url": "someplace",
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"

      },
      {
        "date": "2017-10-15",
        "start_time": "07:45 AM",
        "map_img_url": "gogia_event_maps.jpg",
        "redirect_url": "/Raheja+Acropolis+2",
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      },
      {
        "date": "2017-10-21",
        "start_time": "05:01 AM",
        "map_img_url": "gogia_event_maps.jpg",
        "redirect_url": "https://www.google.co.in/maps/place/Raheja+Acropolis+2",
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      },
      {
        "date": "2017-10-22",
        "start_time": "05:02 AM",
        "map_img_url": "/gogia_event_maps.jpg",
        "redirect_url": "Raheja+Acropolis+2",
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      }];

    console.log(availabilities.filter(av => av.date === this.state.availabilities)[0]);
    return (<div>
      <select
        onChange={this.updateAvailabilities}>
        {availabilities.map((item) => {
          return (<option key={item.date} value={item.date}>{item.date}</option>);
        })}
      </select>
      <br />

      {availabilities.length ?
        JSON.stringify(availabilities.filter(av => av.date === this.state.availabilities)[0])
        : null
      }
    </div>);
  }
}

ReactDOM.render(
  <SlectElement name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>