How to read field input into a react state array?

Question

In the web app that I'm working on, I'm giving the user an option to select the number of machines they have inside a facility. Based on the selected number, a respective number of form fields appear to the user. I managed to configure the interface using this question here. I'm confused now on how to read the input values of each field into a dynamic state array? this is the code that I'm working on currently JSFiddle.

handleOnChange(value) {
  this.setState({ inputSize: value.target.value });
}

renderInputs(value) {
  const inputs = [];
  for (let i = 0; i < value; i++) {
    inputs.push(
      <div>
        <Input
          value={this.state.sortingMachines[i]}
          onChange={(event) =>
            this.props.setState({ sortingMachines: event.target.value })
          }
          icon="ethereum"
        />
      </div>
    );

    for (let i = 0; i < value; i++) {
      console.log(this.state.sortingMachines[i]);
    }
  }
  return inputs;
}

render() {
  const { sortingMachines } = this.state;

  console.log(this.state.inputSize);

  return (
    <div>
      <Form.Field width={6}>
        <label>Sorting Machines Address</label>
        <input
          type="number"
          name="quantity"
          min="1"
          max="7"
          onChange={(value) => this.handleOnChange(value)}
        />
        <div>{this.renderInputs(this.state.inputSize)}</div>
      </Form.Field>
    </div>
  );
}

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

Nick · Accepted Answer · 2021-01-05 13:10:03Z

One option is to make default the sortingMachines array in state to an empty array and then just make sure you're setting the ith element to the value you want in the change handler (after copying the array);

constructor() {
  this.state  = {
    sortingMachines: []
  }
}

renderInputs(value) {
  const inputs = [];
  for (let i = 0; i < value; i++) {
    inputs.push(
      <div>
        <Input
          value={this.state.sortingMachines[i]}
          onChange={(event) =>
            const newSortingMachines = [...this.state.sortingMachines];
            newSortingMachines[i] = event.target.value;
            this.setState({ sortingMachines: newSortingMachines })
          }
          icon="ethereum"
        />
      </div>
    );

    for (let i = 0; i < value; i++) {
      console.log(this.state.sortingMachines[i]);
    }
  }
  return inputs;
}

Now, the sortingMachine value for each element will be at its corresponding array position.

Edit: One small word of caution here is that, if you delete one of your elements, you'll need to make sure you shift your sortingMachines array accordingly. This might not be a concern for your use case, but if it is, then arrays might not be the best solution. If you have some kind of unique identifier for each element, you could use an object structure.

Collectives™ on Stack Overflow

How to read field input into a react state array?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related