How to separate input field values in React?

Question

I have a list of inputs that are generated based on the number of items in an array:

const itemInputs = items.map(
  item => <Input key={item} value={itemInput} onChange={event => this.updateItem(event)} />,
);

Here is what my updateItem function looks like:

  updateItem(event) {
    this.setState({
      itemInput: event.target.value,
    });
  }

So if there are two items in my array, then two input fields will be generated, like so:

But when I enter a value for the first input field, that same value appears in the second input field, like so:

How can I prevent this from happening? I want each input field to retain its own value.

Zohaib Ijaz · Accepted Answer · 2019-05-14 00:22:05Z

3

Here is one way to do that

const items = ['firstName', 'lastName'];

const itemInputs = items.map(
  name => <Input key={name} name={name} value={this.state[name]} onChange={event => this.updateItem(name, event)} />,
);

updateItem = (name, event) => {
  this.setState({ [name]: event.target.value });
}

answered May 14, 2019 at 0:22

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

Comments

Eden Eliel · Accepted Answer · 2019-05-14 00:25:04Z

0

Well, I assume you are putting all the inputs in one component. And component can have only 1 state.

In other words, you are changing the value of itemInput, and it effects all inputs because ypu declared that their value would be itemInput of the same component of all.

What you can do is make a new component for input, and call it instead. That way you will have state for every single input.

Hope that helps. Good luck

answered May 14, 2019 at 0:25

Eden Eliel

661 silver badge7 bronze badges

1 Comment

Eden Eliel Over a year ago

I see. Well you are still pass those custom component the value on a single component. Which is 1 state.

Collectives™ on Stack Overflow

How to separate input field values in React?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related