title: How do I conditionally render an icon based on the value of a prop?
body: <p><strong>Goal</strong>: To conditionally render the appropriate icon for attendance statuses (default, present, excused, absent). </p>
  
  <p><strong>Problem</strong>: I am having trouble using the state in a conditional statement to return the proper icon. </p>
  
  <p>It seems that the first thing that happens is, in componentDidMount(), the state of 'status' is set to what the prop is. The last thing that happens, as shown in the console logs, is that this.state.status is "excused" which is correct - so it seems the state is properly being set? But I'm confused about why everything that happens in between does not reflect that. At the conditional statement, I am unable to capture the state to figure out which icon should be returned. </p>
  
  <p>I've tried to do research but I am new to React and also kind of unsure how to word my problem in a way that my search would return the answers I need so I hope that makes sense. Your feedback is appreciated!</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>class StudentDisplay extends Component {
      constructor(props) {
          super(props)
          this.state = {
              status: ""
          }
          this.checkStatus = this.checkStatus.bind(this)
      }
  
      checkStatus = currentStatus =&gt; {
  
          console.log(`checkStatus()... `)
          console.log(`currentStatus = ${currentStatus}`);
  
          // temporary conditional statement for testing
          if (currentStatus === "") {
              console.log(`... currentStatus === blank`)
          } else if (currentStatus === "excused") {
              console.log(`... currentStatus === excused`)
          }
      }
  
      componentDidMount = () =&gt; {
  
          console.log(`componentDidMount()...`)
  
          this.setState({
              status: this.props.status
          })
  
          let currentStatus = this.state.status
          console.log(`let currentStatus = this.state.status`)
          console.log(`currentStatus = ${currentStatus}`)
          console.log(`this.state.status = ${this.state.status}`)
  
          this.checkStatus(currentStatus);
          console.log(`this.checkStatus( ${currentStatus} )`);
      }
  
      render() {
          return (
              &lt;div className="card card-body"&gt;
                  {console.log(`render()... `)}
                  {console.log(`and this.state.status = ${this.state.status}`)}
                  &lt;h2 className="text-center"&gt;{this.state.status}&lt;/h2&gt;
              &lt;/div&gt;
  
              // default icon = &lt;i className="fas fa-question-circle"&gt;&lt;/i&gt;
              // present icon = &lt;i className="fas fa-user-check"&gt;&lt;/i&gt;
              // excused icon = &lt;i className="fas fa-user-minus"&gt;&lt;/i&gt;
              // absent icon = &lt;i className="fas fa-user-slash"&gt;&lt;/i&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong>Console logs</strong>: </p>
  
  <p>render()... </p>
  
  <p>and this.state.status = </p>
  
  <hr>
  
  <p>componentDidMount()...</p>
  
  <p>let currentStatus = this.state.status</p>
  
  <p>currentStatus = </p>
  
  <p>this.state.status = </p>
  
  <hr>
  
  <p>checkStatus()... </p>
  
  <p>currentStatus = </p>
  
  <p>... currentStatus === blank</p>
  
  <p>this.checkStatus(  )</p>
  
  <hr>
  
  <p>render()... </p>
  
  <p>and this.state.status = excused</p>
  
  <hr>