Hide Font Awesome icon component and display another based on state

Question

I'm building a pomodoro timer with 4 sessions. When a 25-minute timer is up, 1 is added to a state variable sessionNumber . I have four of these circle/unchecked checkboxes displayed when the pomodoro cycle starts:

<FontAwesomeIcon
  icon={faCircle}
  size="2x"
  className="pomodoro-unchecked session-checkbox"
/>

Each time 1 is added to sessionNumber state, I would like to hide one and display a different icon component:

<FontAwesomeIcon
  icon={faCheckCircle}
  size="2x"
  className="pomodoro-checked session-checkbox"
/>

The only ways I could think of doing this would take a whole lot of code -- for example if statements based on each session number, like with an if statement, if the session is 0, display 4 unchecked circles (with the code for all four components), and if the session is 1, display 1 checked circle and 3 unchecked circles, and so forth. The second way I considered would be to give each one a different class name and in the method that changes the session number, display and hide each one, based on which session number it is (that would be more complicated). Is there a simpler, more succinct method?

Answer 1

You could use an array in state . You could initialise the array with four "faCircle" and then use the array.fill() method on setState to fill up the icons with "faCheckCircle". Then you can map over the array to render the appropriate icon.

class SessionIcons extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessions: 0,
      icons: ["faCircle", "faCircle", "faCircle", "faCircle"]
    };
  }

  onAddSession = () => {
    this.setState(state => ({
      sessions: state.sessions + 1,
      icons: state.icons.fill("faCheckCircle", 0, state.sessions + 1)
    }));
  };

  render() {
    return (
      <div>
        {this.state.icons.map((icon, index) => (
          <FontAwesomeIcon
            key={icon + index}
            icon={icon === "faCircle" ? faCircle : faCheckCircle}
            size="2x"
          />
        ))}
        <button onClick={this.onAddSession}>Add session</button>
      </div>
    );
  }
}

Demo: https://codesandbox.io/s/shy-tdd-qzs1n

Answer 2

 class Timer extends React.Component{
  state = {  sessionNumber: 1}

 checkTimer = () =>{
..your logic to check timer every 25 mins
 this.setState({timerState:1})
  }
render(){
Let font;
if( this.state.sessionNumber == 1)
 {
    font = <FontAwesomeIcon
    icon={faCircle}
   size="2x"
   className="pomodoro-unchecked session-checkbox"
  />
 }
   else if(this.state.sessionNumber == 2)
   {      
    font = FontAwesomeIcon
  icon={faCheckCircle}
  size="2x"
  className="pomodoro-checked session-checkbox"
    />
   return(

        {font}


     )
    }
   }