How to passing data from component to another component on reactJs using map?

Question

I have a react-big-calendar, I want when I click on new event, the dialog of the hour will be having the values of the hour clicked on the new event, for example, I click the mouse from 07:30 to 08:30, so I want to get this hour on my dialog as the value of the input of start and end state, but, I have the same dialog by clicking on the button "Ajouter disponibilité" which his position is above of the calendar, when I click it I will have the hour of the moment, and at both of them I can change it with the clock.

My code sandbox is :

https://codesandbox.io/s/9llpm579py

When I run it, I get the same value is moment for a both of them.

How can I fix it ?

Answer 1

https://codesandbox.io/s/8xl25y616j

Because you're passing the required format for those text fields in as parameters to handleAjouter = (start, end), you can just bind them to your first element's start and end. You could use moment like you had, but it doesn't seem necessary.

handleAjouter = (start, end) => {
    this.state.tranches[0].start = start;
    this.state.tranches[0].end = end;
    this.setState({
      start: moment(start).format("HH:mm"),
      end: moment(end).format("HH:mm"),
      clickDisponibilite: true,
      tranches: this.state.tranches,
      openPopupAjout: true
    });
  };

Because your initial element, while it gets its initial value from start and end, its values are inside tranches[0].

So now it pulls those values in https://gyazo.com/d0f887a0fa3d4dfeff56919a7cf94b28