title: React Js Updating a value inside a array with onChange to a child component
body: <p>I have a list with opening_hours that I map inside my render function. I map them to a child component. I want to change the value of each object inside my parent state when the child component state is changed. Only problem is that my values don't change in the child component nor the parent state. I have passed the onChange method to each child component, but the problem lies in my onChange function in the parent state. </p>
  
  <p>I have tried to pass the onChange to my child component and update the state with [e.target.name] : e.target.value. But that didn't work. So I tried to copy the arrayList and update the state based on the index of the mapped arrayList. That also didn't work. </p>
  
  <pre><code>    handleOnChange =  (index) =&gt; {
          let newData = [...this.state.opening_hours];
          this.setState(
              newData.map((barbershop, j) =&gt; {
                  if (j === index) {
                      return barbershop;
                      console.log(barbershop)
                  }
              return {
                  newData,
              };
          }));
          console.log(newData)
      };
  
      render() {
          return (
              &lt;&gt;
                  &lt;div className="container mb-2"&gt;
                      &lt;h4&gt;Opening hours &lt;/h4&gt;
                      &lt;Form&gt;
                          {this.state.opening_hours.map((barbershop, index) =&gt; (
                              &lt;Day
                                  key={barbershop.id}
                                  day={barbershop.day}
                                  open_time={barbershop.open_time}
                                  close_time={barbershop.close_time}
                                  index = {index}
                                  onChange={() =&gt; this.handleOnChange(index)}/&gt;
                          ))}
                      &lt;/Form&gt;
  
  
                      &lt;Button onClick={this.handleSubmit} variant="primary" type="submit"&gt;
                          Update opening hours
                      &lt;/Button&gt;
                  &lt;/div&gt;
              &lt;/&gt;
          );
      }
  }
  </code></pre>
  
  <p>My child component looks like this </p>
  
  <pre><code>class Day extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              day: this.props.day,
              open_time: this.props.open_time,
              close_time: this.props.close_time,
          };
          console.log(this.state)
      }
  
      handleChange = () =&gt; {
          this.props.onChange(this.props.index)
      }
  
      render() {
          return (
                  &lt;Form.Group as={Row}&gt;
                  &lt;Form.Label column sm="3"&gt;
                      {ENUM[this.state.day]}
                  &lt;/Form.Label&gt;
                  &lt;Col sm="3"&gt;
                      &lt;Form.Control
                          name="open_time"
                          value={this.state.open_time}
                          onChange={this.handleChange}
                          type="time"
                          min="08:00"
                          max="24:00"/&gt;
                  &lt;/Col&gt;
                  &lt;Col sm="3"&gt;
                      &lt;Form.Control
                          name="close_time"
                          value={this.state.close_time}
                          onChange={this.handleChange}
                          type="time"
                          min="08:00"
                          max="24:00"/&gt;
                  &lt;/Col&gt;
              &lt;/Form.Group&gt;
          );
      }
  }
  
  </code></pre>
  
  <blockquote>
    <p>EDIT:</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/RSK4P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RSK4P.png" alt="enter image description here"></a></p>