How To Change The Value Of Input Dynamically?

I have a dynamic inputs, which I can add and delete a row with inputs, there are inputs of material-ui for timepicker, which having an input with her icon of a clock when I click

Solution 1:

I'm going to set you on the right track. I think if you get this, you'll be able to quickly fix the rest of the problems. I don't really know what you're trying to do with the start and end though. So what I've done will only work on the timepicker and you can use this to fix the keyboard thing again.

Here is my forked version https://codesandbox.io/s/2xm39130kn

When you call handleDialogStartChange with multiple objects, you can't just modify one state. Unless they're all supposed to share the same time. That seems pointless.

I modified your timepicker onChange function to onChange={time => this.handleDialogStartChange(i, time)} so you can push the index as well so you know which one you want to work with.

I modified your timepicker value function to value={this.createDateFromTextValue(el.start)} so you're referencing the individual element, not the original state variable.

Then in andleDialogStartChange modify the the state of the tranches where you're storing these times, using that index. You'll get a warning not to modify state like this, but so long as you're using it in conjunction with setState, this.setState({ tranches: this.state.tranches });, it's a legal operation.

handleDialogStartChange = (i, newValue) => {
    const hours = newValue
      .getHours()
      .toString()
      .padStart(2, "0");
    const minutes = newValue
      .getMinutes()
      .toString()
      .padStart(2, "0");
    const textValue = hours + ":" + minutes;
    this.state.tranches[i].start = textValue;
    this.state.tranches[i].end = textValue;
    this.setState({ tranches: this.state.tranches });
    this.setState({ start: textValue });
  };

Solution 2:

To Resolve I get the clock and I chose the hour, but it's not changed make a small change value={el.start} to value={this.state.start}.