I have input a unique "key" prop but still got error asking me to input it in React-CodePudding

so this is my render, it render basically a ui where a username and their email. it also have the option to add new user but when I run the code in my local host, i get this error in my console: Warning: Each child in a list should have a unique "key" prop.

  render() {
    return (
      <div className="App">
        {this.state.users.map((user) => {
          return (
            <React.Fragment>
              <div key={user._id} className="box">
                <h3>{user.name}</h3>
                <h4>{user.email}</h4>
                <button
                  onClick={() => {
                    this.beginEdit(user);
                  }}
                >
                  Update
                </button>
                
                <button
                  onClick={() => {
                    this.deleteUser(user);
                  }}
                >
                  Delete
                </button>
              </div>
            </React.Fragment>
          );
        })}
        {this.renderAddUser()}
      </div>
    );
  }
}

this is my AddRenderUser


  // render new User 
  renderAddUser() {
    return (
      <React.Fragment >
        <input
          type="text"
          placeholder="User name"
          value={this.state.newUserName}
          onChange={this.updateFormField}
          name="newUserName"
        />
        <input
          type="text"
          placeholder="User email"
          value={this.state.newUserEmail}
          onChange={this.updateFormField}
          name="newUserEmail"
        />
        <button onClick={this.addUser}>Add</button>
      </React.Fragment>
    );
  }

Although I did put the keys props in my div, so not sure how to correct this error

CodePudding user response：

Your key should be in your top-most element

  render() {
    return (
      <div className="App">
        {this.state.users.map((user) => {
          return (
            <React.Fragment key={user._id}>
              <div  className="box">
                <h3>{user.name}</h3>
                <h4>{user.email}</h4>
                <button
                  onClick={() => {
                    this.beginEdit(user);
                  }}
                >
                  Update
                </button>
                
                <button
                  onClick={() => {
                    this.deleteUser(user);
                  }}
                >
                  Delete
                </button>
              </div>
            </React.Fragment>
          );
        })}
        {this.renderAddUser()}
      </div>
    );
  }
}

CodePudding user response：

Please try to use index value instead of user.id as follows:

render() {
return (
  <div className="App">
    {this.state.users.map((user, i) => {
      return (
        <React.Fragment key={i}>
          <div className="box">
            <h3>{user.name}</h3>
            <h4>{user.email}</h4>
            <button
              onClick={() => {
                this.beginEdit(user);
              }}
            >
              Update
            </button>
            
            <button
              onClick={() => {
                this.deleteUser(user);
              }}
            >
              Delete
            </button>
          </div>
        </React.Fragment>
      );
    })}
    {this.renderAddUser()}
  </div>
);

} }