React input setState for array of objects

Question

Look at the form to edit phone numbers in Google Contacts.

Let's say my state looks like:

    this.state = {
        phones: [
            {
                country: 'US',
                label: 'Home',
                number: '555'
            }
        ],

    };

My HTML would look like, in a loop and simplified to be all text inputs:

<input type="text" value={this.state.phones[index].country} onChange={this.handleChange} />
<input type="text" value={this.state.phones[index].number} onChange={this.handleChange} />
<input type="text" value={this.state.phones[index].label} onChange={this.handleChange} />

How would you implement the handleChange to call setState while supporting the fact that it is an array, and that each item in the array has multiple properties?

I saw pieces of answers in other questions, but nothing complete.

If I follow your question correctly you should create a component Phone which handles it's own state — Paul Fitzgerald
– Paul Fitzgerald, Commented Jul 5, 2018 at 14:23

Paul Fitzgerald · Accepted Answer · 2018-07-05 14:56:46Z

4

You can do something like the following and also make a Phone component.

class Phone extends React.Component {

  render() {
    return (
      <div className="App">
        <p>{this.props.label}</p>
        <input
          type="number"
          onChange={this.props.updateNumber}
          value={this.props.number}
        />
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    phones: [
      {
        name: "US",
        number: ""
      },
      {
        name: "UK",
        number: ""
      }
    ]
  };

  updateNumber = (e, index) => {
    const phones = this.state.phones;
    phones[index].number = e.target.value;
    this.setState({
      phones
    });
  };

  render() {
    return (
      <div className="App">
        {this.state.phones.map((phone, i) => {
          return (
            <Phone
              updateNumber={e => {
                this.updateNumber(e, i);
              }}
              number={this.state.phones[i].number}
              label={phone.name}
            />
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

edited Jul 5, 2018 at 14:56

answered Jul 5, 2018 at 14:28

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

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

8 Comments

Nathan H Over a year ago

Interesting. Is that considered best-practice? Also, (sorry newbie here), but will the state be propagated upwards? At the end of the day, the actual form is in the parent component, and it will be the one sending the updated user profile to the server, etc.

Paul Fitzgerald Over a year ago

I believe it is considered the correct way of doing this. It was something that used to catch me out before. I know what you mean by sending the data to the server from the parent component. You could pass the data back to the parent from the child component

Nathan H Over a year ago

So you are saying, the sub-component will call a function on its parent (which it received as an input). I think we're back to partial answers here, because in our case we have an array of sub-components. So how would the sub-component update the correct item in the array?

Paul Fitzgerald Over a year ago

you know what, I am looking here as I know what you mean exactly now - I think I am a little confused too - gonna try and crack it. AIt is a strange one when you try and set the state in the parent - that is where it gets caught

Paul Fitzgerald Over a year ago

@NathanH I think the updated answer is what you are looking for

|

ryangoree · Accepted Answer · 2018-07-05 14:31:56Z

0

2 options

Make a Phone component with it's own state as suggested by Paul Fitzgerald.
Add the index to a data-index attribute and check for the value in handleChange.

Example of 2:

<input type="text" value={this.state.phones[index].country} data-index="0" onChange={this.handleChange} />
<input type="text" value={this.state.phones[index].number} data-index="0" onChange={this.handleChange} />
<input type="text" value={this.state.phones[index].label} data-index="0" onChange={this.handleChange} />

then in handleChange:

handleChange(e) {
    ...
    const i = e.target.dataset.index;
    ...
}

answered Jul 5, 2018 at 14:31

ryangoree

1,95219 silver badges23 bronze badges

2 Comments

Nathan H Over a year ago

Regarding option (2), how does this help me? Getting the index wasn't really the problem, I meant, how do I then update this information in setState?

ryangoree Over a year ago

Oh right, there are few ways to update a single object in a state array, but that's a different question. Paul's answer is really the better way to go.

Collectives™ on Stack Overflow

React input setState for array of objects

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related