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?

I don't get what you are asking, if you want to format date use moment, it's an easy library — Saahithyan Vigneswaran
– Saahithyan Vigneswaran, Commented Nov 6, 2017 at 8:50

Tom · Accepted Answer · 2017-11-06 09:30:44Z

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>

answered Nov 6, 2017 at 9:30

Tom

2,6553 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Over a year ago

@ChandanSingh No problem, you can accept the answer if it worked for you.

user264675 Over a year ago

hey @Tom if availabilities:[] array am getting as user input through form this same code will work ?? or suggest me how do that

user264675 Over a year ago

Basically I need to achieve this @Tom stackoverflow.com/questions/49909219/…

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related