React Conditional Rendering

 Botton.js:

import React from 'react';

class Button extends React.Component{

    render(){

        const {change, locale, show} = this.props;

        return(

            <>

            <button type='button' onClick={() =>change(locale)}>

                {locale === 'bn-BD' ? "change clock": "গড়ি পরিবর্তন করুন"}

            </button>

            {show && <p>Hello</p>}

            </>

           

        );

    }

}

export default Button;

Clock.js:

import React from 'react';

import Button from './Button';

class Clock extends React.Component {

  state = {date: new Date(),locale: 'bn-BD'};

   

    componentDidMount(){

        this.clockTimer = setInterval(() =>this.tick(), 1000);

    }

    componentWillUnmount(){

        clearInterval(this.clockTimer);

    }

    handelClick = (locale) => {

        this.setState({

          locale,

        });

    };

    tick(){

      this.setState({

          date: new Date(),

      });

  }

  render() {

    const {date,locale}= this.state;

    // let button;

    // if(locale==='bn-BD'){

    //   button = (

    //     <Button change={this.handelClick} locale= 'en-US'>Click Me</Button>

    //   );

    // }else {

    //   button = (

    //     <Button change={this.handelClick} locale='bn-BD'>Click Me</Button>

    //   );

    // }

    return(

      <div>

        <h1 className='heading'>

        <span className='text'>{date.toLocaleTimeString(locale)}</span>

      </h1>

      {/* {button} */}

      {locale === 'bn-BD' ? (<Button change={this.handelClick} locale= 'en-US' show={false}/>):(<Button change={this.handelClick} locale= 'bn-BD' show/>)}

      </div>

    );

  }

}

export default Clock;