Onclick Render New Component And Hide Current Component?

I am trying to display UserManagementForm component when we click on add new user button (see screenshot). But when I click on add user button the form gets displayed but the add b

Solution 1:

Are you looking for something like this?

When you click in "Add", the button won't be shown and neither the users will.

At the same time, the "Add" form will be shown.

render() {
    return (
        <div className="users-wrap">
            <h1>Users</h1>
            <div className="task-content">
                <div className="user-wrap">
                    <div className="users">
                        {!this.state.showform && [
                                <div className="item-card add" onClick={this.addUser} >
                                    <img src={require("../../images/plus.svg")} className="plus-icon" />
                                    <div className="lbl">Add a new User</div>
                                </div>,
                                this.displayUsers()
                            ]
                        }

                        {this.state.showform && <UserManagementForm />}
                    </div>
                </div>
            </div>
        </div>
    );
}

Solution 2:

You can use a negative check on the same state variable "showForm" to hide the Add button card. Something like below should help you :

{ !this.state.showForm ?
  <div className="item-card add" onClick = {this.addUser} >
     <img src={require("../../images/plus.svg")} className="plus-icon"/>
     <div className="lbl">Add a new User</div>
  </div>
  : null
}