Conditionally rendering component on button click (React)

Question

I have created a basic React project that is pulling data from a SQL server. I would like this to be able to be rendered conditionally depending on what button has been clicked.

This is my Display Users Component which is used within my AdminViewUsers component (What is actually displaying the users).

import React, { Component } from 'react';
import './customers.css';

class DisplayUsers extends React.Component{
  constructor(){
    super();

    this.state= { users: [] } 
  }
  componentDidMount(){
   this.setState({
      users: this.getItems()
   })
  }

  getItems(){
fetch('/admin-view-users')
.then(recordset => recordset.json())
.then(results => { console.log(results.recordset); this.setState({'users': results.recordset}); });

  }

  render () {

    console.log(this.state.users)
    return (
    <ul>
      {this.state.users && this.state.users.map(function(user, index){

        //if (user.severity === 1){          
        return(
          <div className ="jumbotron">
        <li>
          Severity: {user.severity}
        </li>
        <li>
          <p>User Name:{user.name} </p>
        </li>

        <li>
        User Email: {user.email}
        </li>
        <li>
          Description of Issue: {user.description} 
          </li>
          <button>See Details</button>
          </div>
        )
        })
         } 
     </ul>   
    );    
  }
}

export default DisplayUsers;

This is my AdminViewUsers Component

import logo from '../codestone logo.png';
import {Link } from 'react-router-dom'
import '../bootstrap.min.css'

import '../bootstrap.min.css'
import '../App.css'

import  Customers  from "../Components/customers";
import  DisplayUsers  from "../Components/DisplayUsers";

import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, DropDownButton } from 'reactstrap';

function Home() {
  return (

      <div> 
        <Header/>
        <SeveritySelector/>
        <DisplayUsers/>
     </div>
  );
}

function Header(){
    return (
      <div class="jumbotron">
        <div className = "User-Menu">
      <Link>User details  </Link>
      </div>
      <img className='profile-image' alt='icon' src={logo} width="340" height="60"/>
     <Navigation/>
    </div>
      )
    }

    function Navigation (){
      return(
        <div>
          <br/>
          <div class="btn-group">
     <Link to= '/home'><button type="button" class="btn btn-light">Home</button></Link>
     <Link to= '/admin-view-users'><button type="button" class="btn btn-light">View Users(Admin)</button></Link>
    </div>
      </div>
      )
    }

    function SeveritySelector (){
      return(
         <div className = "Severity-Toolbar">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Severity High</button>
        <button type="button" class="btn btn-secondary">Severity Medium</button>
       <button type="button" class="btn btn-secondary">Completed</button>
       <button type="button" class="btn btn-secondary">View All</button>
  </div>
        </div>
        </div>
      )
    }

  export default Home;

Essentially I would like to use the function Severity Selector to be the decider of how the statement is displayed.E.g If the high severity button is selected then it will display all with a high severity (1) if medium selected all with medium severity (2) and completed to have a severity of 3. Finally a button to display all.

What in your opinion is the best way to do this? I understand I could use multiple statements within my "server.js" and load different queries and have them connected to different pages.

But is there a way that I could just use a if statement or something similar to determine what button is selected to avoid multiple transactions with the server? You can see a brief attempt I had within the display users with an if statement which worked but just was not dependent on the buttons.

MaartenDev · Accepted Answer · 2019-12-31 14:11:36Z

2

Conditional render can be achieved using various techniques, the most used is the bracket style variant. It can be used in the following way:

function Header(){
    const showFirst = true;

    return (
      <div class="jumbotron">
         {showFirst && <MyFirstComponent />}
         {!showFirst && <MySecondComponent />}
       </div>
      )
    }

This will render the <MyFirstComponent /> if showFirst is true and will show <MySecondComponent /> if it is false.

answered Dec 31, 2019 at 14:11

MaartenDev

5,8305 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditionally rendering component on button click (React)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related