Show and hide all - React

Question

I am playing with React.js to improve my skills.  The exercise is simple, I have 3 CountDown clocks each triggered by an individual button. However, I cannot seem to figure it out how to show one CountDown and hide all others. Also, it would be nice to toggle between them smoothly without having to click on a button to 'close' the running countdown in order to show the other. I hope this makes sense. Thank you!!

import React from 'react'

import Buttons from './Buttons/Buttons'
import Display02 from './Display/Display02'

import classes from './Q5Root.module.css'


class Q5Root extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            christmas: false,
            birthday: false,
            newYear: false
        }

    }

    handleChristmas = () => {
        this.setState({
            christmas: !this.state.christmas
        })
    }

    handleBirthDay = () => {
        this.setState({
            birthday: !this.state.birthday
        })
    }

    handleNewYear = () => {
        this.setState({
            newYear: !this.state.newYear
        })
    }


    render() {
        let CountDownText = null

        //this.state.christmas ? <Display02 date="Dec 24, 2020 15:37:25" /> : <p>Happy CountDown</p>
        //this.state.birthday ? <Display02 date="Sep 21, 2020 14:00:00" /> : <p>Happy CountDown</p>
        //this.state.newYear ? <Display02 date="Dec 31, 2020 15:37:25" /> : <p>Happy CountDown</p>

        if (this.state.christmas === true && this.state.birthday === false && this.state.newYear === false) {
            console.log('christmas')
            CountDownText = <Display02 date="Dec 24, 2020 15:37:25" /> 
        } else if (this.state.christmas === false && this.state.birthday === true && this.state.newYear === false) {
            console.log('birthday')
            CountDownText = <Display02 date="Sep 29, 2020 14:00:00" /> 
        } else if (this.state.christmas === false && this.state.birthday === false && this.state.newYear === true) {
            console.log('newYear')
            CountDownText =  <Display02 date="Dec 31, 2020 15:37:25" /> 
        } else {
            CountDownText = <p>Start The CountDown</p>
        }


        return (
            <div className={classes.layout}>
                {CountDownText}
                <Buttons
                    christmas={this.handleChristmas}
                    myBirthday={this.handleBirthDay}
                    newYear={this.handleNewYear} />
            </div>

        )

    }
}

export default Q5Root

Answer 1

Here is live link : https://codesandbox.io/s/dreamy-taussig-yv2wp

Note :

It just a basic implementaion I dont know your buttons and Display component code yet. It just a POC for reference

There are few things you can do on your code :

1. First track all click i.e if click on christmas make all other state false. It will reduce your long condition of checks i.e :

if (this.state.christmas === true && this.state.birthday === false && this.state.newYear === false) {
            console.log('christmas')
            CountDownText = <Display02 date="Dec 24, 2020 15:37:25" /> 
        } else if (this.state.christmas === false && this.state.birthday === true && this.state.newYear === false) {
            console.log('birthday')
            CountDownText = <Display02 date="Sep 29, 2020 14:00:00" /> 
        } else if (this.state.christmas === false && this.state.birthday === false && this.state.newYear === true) {
            console.log('newYear')
            CountDownText =  <Display02 date="Dec 31, 2020 15:37:25" /> 
        } else {
            CountDownText = <p>Start The CountDown</p>
        }

to

if (this.state.christmas === true) {
          console.log('christmas')
          CountDownText = <Display02 date="Dec 24, 2020 15:37:25" /> 
      } else if (this.state.birthday === true ) {
          console.log('birthday')
          CountDownText = <Display02 date="Sep 29, 2020 14:00:00" /> 
      } else if (this.state.newYear === true) {
          console.log('newYear')
          CountDownText =  <Display02 date="Dec 31, 2020 15:37:25" /> 
      } else {
          CountDownText = <p>Start The CountDown</p>
      }

2. How would you attain first. Its easy just set all rest variable to false in setState :

handleChristmas = () => {
      this.setState({
          christmas: !this.state.christmas,
          birthday: false,
          newYear: false
      })
  }

  handleBirthDay = () => {
      this.setState({
          birthday: !this.state.birthday,
          christmas: false,
          newYear: false
      })
  }

  handleNewYear = () => {
      this.setState({
          newYear: !this.state.newYear,
          birthday: false,
          christmas: false
      })
  }

That's it :-)

FullCode :

import React from "react";
import "./styles.css";

const Buttons = ({christmas,myBirthday,newYear}) => {
  return (
    <>
    <button onClick={christmas}>christmas</button>
    <button onClick={myBirthday}>myBirthday</button>
    <button onClick={newYear}>newYear</button>
    </>
  )
}
const Display02 = ({date}) => {
  return  (
    <h1>
      {date}
    </h1>
  )
}
class Q5Root extends React.Component {
  constructor(props) {
      super(props)

      this.state = {
          christmas: false,
          birthday: false,
          newYear: false
      }

  }

  handleChristmas = () => {
      this.setState({
          christmas: !this.state.christmas,
          birthday: false,
          newYear: false
      })
  }

  handleBirthDay = () => {
      this.setState({
          birthday: !this.state.birthday,
          christmas: false,
          newYear: false
      })
  }

  handleNewYear = () => {
      this.setState({
          newYear: !this.state.newYear,
          birthday: false,
          christmas: false
      })
  }


  render() {
      let CountDownText = null

      //this.state.christmas ? <Display02 date="Dec 24, 2020 15:37:25" /> : <p>Happy CountDown</p>
      //this.state.birthday ? <Display02 date="Sep 21, 2020 14:00:00" /> : <p>Happy CountDown</p>
      //this.state.newYear ? <Display02 date="Dec 31, 2020 15:37:25" /> : <p>Happy CountDown</p>

      if (this.state.christmas === true) {
          console.log('christmas')
          CountDownText = <Display02 date="Dec 24, 2020 15:37:25" /> 
      } else if (this.state.birthday === true ) {
          console.log('birthday')
          CountDownText = <Display02 date="Sep 29, 2020 14:00:00" /> 
      } else if (this.state.newYear === true) {
          console.log('newYear')
          CountDownText =  <Display02 date="Dec 31, 2020 15:37:25" /> 
      } else {
          CountDownText = <p>Start The CountDown</p>
      }


      return (
          <div>
              {CountDownText}
              <Buttons
                  christmas={this.handleChristmas}
                  myBirthday={this.handleBirthDay}
                  newYear={this.handleNewYear} />
          </div>

      )

  }
}

export default function App() {
  return (
    <div className="App">
      <Q5Root/>
    </div>
  );
}