How to update nested states in React?

Question

I am pretty new to react and can't wrap my head around how to go about doing this.

So I have my state as follows: Main.js

import React, { Component } from "react";
import Users from "./Users";

class App extends Component {
  state = {
    users: [
      { id: 0, name: "a", count: 0 },
      { id: 1, name: "b", count: 0 },
      { id: 2, name: "c", count: 0 },
    ],
  };

  increment = (id) => {
    this.setState({
      // No idea how to interface this
    });
  };

  render() {
    return (
      <div className="App container">
        <h1 className="center blue-text">Counter</h1>
        <Users users={this.state.users} increment={this.increment} />
      </div>
    );
  }
}

export default App;

Users.js

import React from "react";

const Users = ({ users, increment }) => {
  const userList = users.map((user) => {
    return (
      <div className="collection-item" key={user.id}>
        <p>
          {user.name} : {user.count}{" "}
        </p>
        <button onClick={() => increment(user.count)}>+</button>
      </div>
    );
  });

  return <div className="users collection">{userList}</div>;
};

export default Users;

How do I go about updating the count value via function, I can't figure out how to use this.setState to update the count while its nested. Any ideas? Thank you for any guidance.

Can you please add the remaining code blocks? On which event you are trying to update the state. Also, it would be really good if you can share your minimal code through code sandbox or stackblitz — Manish Sundriyal, Apr 16 '20 at 19:10
Does this answer your question? [Whats the best way to update an object in an array in ReactJS?](https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — Emile Bergeron, Apr 16 '20 at 20:02
@ManishSundriyal I've added the full code from all files. It's pretty straight forward. I am just loading the state values into a list and displaying it. Then I want to be incremented when the button is clicked. — fynmnx, Apr 16 '20 at 20:14

score 2 · Accepted Answer · answered Apr 16 '20 at 20:35

You need to pass the id of the user, whose count is going to update.
Then you need to find that user and update it's count and then set the users state.

Here is the working app: https://codesandbox.io/s/nifty-resonance-ek411?file=/src/App.js

main.js

import React, { Component } from "react";
import Users from "./Users";

class App extends Component {
  state = {
    users: [
      { id: 0, name: "a", count: 0 },
      { id: 1, name: "b", count: 0 },
      { id: 2, name: "c", count: 0 }
    ]
  };

  increment = id => {
    // find to user to update
    const userIndex = this.state.users.findIndex(user => user.id === id);
    // for invalid id
    if (userIndex < 0) {
      return;
    }
    const userToUpdate = this.state.users[userIndex];
    const updatedUsers = [...this.state.users];
    // update the user on that index
    updatedUsers[userIndex] = {
      ...userToUpdate,
      count: userToUpdate.count + 1
    };
    /// update the user state
    this.setState({ users: updatedUsers });
  };

  render() {
    return (
      <div className="App container">
        <h1 className="center blue-text">Counter</h1>
        <Users users={this.state.users} increment={this.increment} />
      </div>
    );
  }
}

export default App;

app.js

import React from "react";

const Users = ({ users, increment }) => {
  const userList = users.map(user => {
    return (
      <div className="collection-item" key={user.id}>
        <p>
          {user.name} : {user.count}{" "}
        </p>
        <button onClick={() => increment(user.id)}>+</button>
      </div>
    );
  });

  return <div className="users collection">{userList}</div>;
};

export default Users;

That's perfect. I was actually trying to index by ID but could not figure out the syntax. Thank you — fynmnx, Apr 16 '20 at 23:48

How to update nested states in React?

1 Answers1