Change from viewing analogue clock to digital clock in React

Question

I am trying to change from viewing an analogue clock to viewing a digital clock when it is clicked. I have the code for both clocks but can't figure out how to make them change. I want to be able to click on the clock or the <div> surrounding the clock and make it switch between digital and analogue.

import React from 'react';
import Clock from 'react-clock';

class ClockFunction extends React.Component {

    state = {
        time: new Date(),
        isAnalogueView: true,
        isDigitalView: false

    }

    componentDidMount() { 
        this.update = setInterval(() => {
            this.setState({ time: new Date() });
        }, 1 * 1000);
    }

    componentWillUnmount() { 
        clearInterval(this.update);
    }

    handleClick() {
        this.setState(state => ({
        isAnalogueView: !state.isAnalogueView
        }));
    }


    render() {


        function onClick() {
            var isAnalogueView = false;
            var isDigitalView = true;
            var time = new Date();

            if (isAnalogueView === true) {
                return (
                    <div>
                        <div>
                            {time.toLocaleTimeString()}
                        </div>
                    </div>
                );
            } else if (isDigitalView === true) {
                return (
                    <div>
                        <Clock value={time} size={100}/>
                    </div>
                );
            }
        }

        return (
            <div>{onClick()}</div>
        );
    }
}

export default ClockFunction;

Any help would be appreciated. Thank you!

Answer 1

I can spot various problems with your code

1. You are setting two state variables isAnalogView and isDigitalView. The best is to not use two booleans for that, or to not use a boolean at all; state = { viewMode: 'analog' } which has two possible values: analog|digital. Then later you render based on that value. and when you click on the div you want, all you do is to alter the state value.

const CLOCK_VIEW_MODES = { ANALOG: 'analog', DIGITAL: 'digital' };

class Clock extends React.Component {
  state = { viewMode: CLOCK_VIEW_MODES.DIGITAL };

  renderAnalog = () => { /* analog rendering */ };
  renderDigital = () => { /* digital rendering */ };

  changeViewMode = () => {
    if (this.state.viewMode === CLOCK_VIEW_MODES.ANALOG) this.setState({ viewMode: CLOCK_VIEW_MODES.DIGITAL});
    if (this.state.viewMode === CLOCK_VIEW_MODES.DIGITAL) this.setState({ viewMode: CLOCK_VIEW_MODES.ANALOG});
  };

  render() {
    return (
      <div onClick={this.changeViewMode}>
        {this.state.viewMode === CLOCK_VIEW_MODES.ANALOG && this.renderAnalog()}
        {this.state.viewMode === CLOCK_VIEW_MODES.DIGITAL && this.renderDigital()}
      </div>
    );
  }

}

2. In render you are creating new fresh variables to represent the viewMode, which will always have that exact same value. You should use the state variable for this.

3. You are declaring your variables with the var keyword which is hoisted globally. Which will create countless problems if you declare variables with the same exact name in other modules. please use const or let to declare your variables.