How can I use `setState` with objects nested in an array in React JS?

Question

With this code, I am able to successfully use setState on a simple object – when I click on "Joey" the name changes to "Igor".

    class Card extends React.Component {
        myFunc = () => {this.props.change('Igor')};
        render() {
            return (
                <p onClick={this.myFunc}>{this.props.name}</p>
            )
        }
    }

    class Parent extends React.Component {
        constructor(props) {
            super(props)
            this.state = { name: "Joey" }
        }

        toggle = (newname) => {
            this.setState((prevState, props) => ({
                name: newname
            }));
        }

        render() {
            return (
                <Card change={this.toggle} name={this.state.name} />
            );
        }
    }

But with this code, which has multiple objects nested in an array, setState is either not able to change each name to "Igor" or it must be modified in some way.

    class Card extends React.Component {

        myFunc = () => {this.props.change('Igor')};
        render() {
            return (
                <p onClick={this.myFunc}>{this.props.name}</p>
            )
        }
    }

    class Parent extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                names: [
                    {
                        name: "Joey"
                    },
                    {
                        name: "Sally"
                    },
                    {
                        name: "Billy"
                    },
                ]
            }
        }

        toggle = (newname) => {
            this.setState((prevState, props) => ({
            // what can I put here to change the name I click on to "Igor"
            }));
        }

        render() {
            const names = this.state.names.map((name, index) => (
                <Card key={index} change={this.toggle} {...name} />
            ))

            return (
                <div>
                    {names}
                </div>
            );
        }
    }

Even though I know this is not how setState works, I tried to access name by passing index and then writing this.state.names[index].name: newname. No surprises here, it didn't work.

I have researched and cannot find similar questions on SO about this although I have found a lot of mentions with regards to immutability helpers. But I am still not sure if that is the way to go.

What is the best way to use setState to modify objects nested in an array?

How will you know which one is clicked? You need some identifier, such as the index of the specific Card. — Andrew Li
– Andrew Li, Commented May 6, 2017 at 2:12

Yangshun Tay · Accepted Answer · 2017-05-06 02:18:32Z

1

Have modified your code and the working example can be found here.

The changes can be found here:

toggle = (index, newname) => {
    this.setState((prevState, props) => ({
        // Return new array, do not mutate previous state.
        names: [
            ...prevState.names.slice(0, index),
            { name: newname },
            ...prevState.names.slice(index + 1),
        ],
    }));
}

render() {
    const names = this.state.names.map((name, index) => (
        // Need to bind the index so callback knows which item needs to be changed.
        <Card key={index} change={this.toggle.bind(this, index)} {...name} />
    ))

    return (
        <div>
            {names}
        </div>
    );
}

The idea is that you need to pass the index into the callback function via .bind, and return a new state array with the modified name. You need to pass the index so that the component knows which object to change the name to newname.

answered May 6, 2017 at 2:18

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

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

1 Comment

samurai_jane Over a year ago

This is very helpful, thank you Tay. This works but for others who may see this later – I failed to mention in my original question that I wished to avoid using .bind(this) for the reason given here (see "Way #2). With Tay's help, I was able to rewrite my code without using .bind(this).

Brad Woods · Accepted Answer · 2017-05-07 02:39:11Z

1

I would use this for the toggle method:

toggle = (nameYouWantChanged, nameYouWantItChangedTo) => {

  this.setState({
    names: this.state.names.map(obj => 
      obj.name === nameYouWantChanged
        ? { name: nameYouWantItChangedTo }
        : obj
    )
  })

}

edited May 7, 2017 at 2:39

answered May 6, 2017 at 2:16

Brad Woods

1,5462 gold badges14 silver badges31 bronze badges

2 Comments

samurai_jane Over a year ago

Thank you Brad, this is pretty clever. You have a missing ) on line 7 that should come after : obj but this is a great solution. I have modified my code so that others can see how this solves the problem.

samurai_jane Over a year ago

Brad, also just wanted you to know that I chose Tay's solution over yours because his use of index keeps problems from arising, for example, in situations where multiple objects in the array may share the same name.

Collectives™ on Stack Overflow

How can I use `setState` with objects nested in an array in React JS?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related