使用 React 编辑用户详细信息

Question

I am stuck on editing user details and updating it.

What I'm trying to accomplish is when I click on "update" button, I can edit their name and email. And I can also delete the entry by clicking the "delete" button.

I have added the ability to add new User which I am able to code.

This is my code: https://codesandbox.io/s/zen-browser-5ifrel?file=/src/User.js

How do I add a if-else statement in my render so that IF i click on "update" button on one of the entry (eg, id === selected.id), it will transform the "name" and "email" to textboxes to allow for edit. And 2 buttons for them to "confirm" their update or "cancel" their update.

  render() {
    return (
      <div className="App">
        {
          this.state.users.map((u) => {
          return (
            <React.Fragment key={u._id}>
              <div className="box">
                <h3>{u.name}</h3>
                <h4>{u.email}</h4>

                
                <button onClick={() => {
                    this.beginEdit(u);
                  }}
                >Update
                </button>

                
                <button onClick={() => {
                    this.deleteUser(u);
                  }}
                >Delete
                </button>

              </div>
            </React.Fragment>
          );
        })}
        {this.renderAddUser()}
      </div>
    );
  }

Answer 1

Use conditional rendering .

render() {
    return (
      <div className="App">
        {
          this.state.users.map((u) => {
          return (
            <React.Fragment key={u._id}>
              <div className="box">
                {u.isEditing ? (
                  <React.Fragment>
                    <input type="text" placeholder="name" />
                    <input type="text" placeholder="email" />
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <h3>{u.name}</h3>
                    <h4>{u.email}</h4>
                  </React.Fragment>
                )}

                
                <button onClick={() => {
                    this.beginEdit(u);
                  }}
                >Update
                </button>

                
                <button onClick={() => {
                    this.deleteUser(u);
                  }}
                >Delete
                </button>

              </div>
            </React.Fragment>
          );
        })}
        {this.renderAddUser()}
      </div>
    );
  }

You can probably figure out the rest.

Answer 2

you can use this that render output depends on the condition of (id === selectedUser.id)

       state = {
         selected = null;
       }

       render() {
        return (
          <div className="App">
            {this.state.users.map((user) => {
              return (
                  <div className="box" >
                  {selected?.id === user?._id ? (
                  <>
                    <input type="text" placeholder="name" defaultValue={user.name} />
                    <input type="text" placeholder="email" defaultValue={user.email} />
                    <button onClick={() => { this.handleCancel(user);}}>
                       Cancel
                    </button>
    
                    
                    <button onClick={() => { this.handleConfirm(user);}}>
                      Confirm
                    </button>
                  </>
                ) : (
                  <>
                    <h3>{user.name}</h3>
                    <h4>{user.email}</h4>
    
                    <button onClick={() => { this.beginEdit(user);}}>
                       Update
                    </button>
    
                    
                    <button onClick={() => { this.deleteUser(user);}}>
                      Delete
                    </button>
                  </>
                )}
                  </div>
              );
            })}
            {this.renderAddUser()}
          </div>
        );
      }