Onclick render new component and hide current component?

Question

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 button does not get removed from the view. I only want to display the form after clicking the add user button. To showform I have used a state variable. So when I click on add new user button it should only display the form and not the CARD's (see first screenshot)

Code:

import React, { Component } from 'react';
import UserManagementForm from './UserManagementForm';
import axios, { post } from 'axios';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
          userList:[],
          showform:false
    }

    this.addUser = this.addUser.bind(this);
  }

  componentDidMount(){
        if(window.sessionStorage.getItem("ud") !== null){
            var _userData = JSON.parse(window.sessionStorage.getItem("ud"));
            this.userDetails = _userData;
        }
        this.getAllUser();
  }

  getAllUser(){
        axios({
            method:"GET",
            url:"http://62.210.93.54:6010/api/getAllUser",
            auth:{
                username:this.userDetails.email,
                password:this.userDetails.password
            }
        }).then((response)=>{
            console.log(response.data);
            this.setState({
                userList:response.data.results
            })    
        })
  }

  displayUsers(){
        return this.state.userList.map( user => {
          return(
                <div className="item-card">
                    <div className="info">    
                        <div className="username">Username: {user.userName}</div>
                    </div>
                    <div className="del-wrap">
                        <img src={require("../../images/cancel.svg")}/>
                    </div>
                </div>
            );
        })
  }

  addUser(){
        this.setState({
            showform:true
        });
  }

  render() {
        return(
          <div className="users-wrap">
                <h1>Users</h1>
                <div className="task-content">
                    <div className="user-wrap">
                        <div className="users">
                            <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/> : null}

                        </div>
                    </div>
                </div> 
          </div>
        );
    }
}

export default App;

Initial view:

After clicking on add new user CARD the form gets displayed below the CARDS I want to display only form and cards should hide:

Answer 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>
    );
}

Answer 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
}