Reacting to moods with icons This is a class in my React app. This code works and displays an appropriate icon and question for every description.

class myQuestion extends PureComponent {
  render() {
    const { description } = this.props.question;
    let icon = icon;
    let question = question;
    if (description === 'Happy') {
      icon = &lt;FontAwesomeIcon icon={faSmile} /&gt;;
      question = 'You answered happy. Why?';
    } else if (description === 'OK') {
      icon = &lt;FontAwesomeIcon icon={faMeh} /&gt;;
      question = 'You answered OK. Why?';
    } else if (description === 'Angry') {
      icon = &lt;FontAwesomeIcon icon={faAngry} /&gt;;
      question = 'You answered angry. Why?';
    } else {
      icon = '';
      question = '';
    }
    return (
      &lt;div&gt;
        &lt;Question
          icon={icon}
          description={description}
          question={question}
        /&gt;
      &lt;/div&gt;
    );
  }
}


I'd like to know how would be a better way to write this if else statement, preferably removing the let.

'description' is a prop of the question, but 'icon' and 'question' are dependent on what the 'description' is. The 'description' comes from the ID of a previous answer to a question.

Is there a way I could put this logic before the render function?
In cases where your value is determined by a string key, a key-value mapping is often the way to go. In this case, we store your icon JSX and questions in objects keyed by description. Then you simply access them using the current description as key.

const icons = {
  Happy: &lt;FontAwesomeIcon icon={faSmile} /&gt;,
  OK: &lt;FontAwesomeIcon icon={faMeh} /&gt;,
  Angry: &lt;FontAwesomeIcon icon={faAngry} /&gt;
}

const questions = {
  Happy: 'You answered happy. Why?',
  OK: 'You answered OK. Why?',
  Angry: 'You answered angry. Why?'
}

class myQuestion extends PureComponent {
  render() {
    const { description } = this.props.question
    const icon = icons[description] || ''
    const question = questions[description] || ''

    return (
      &lt;div&gt;
        &lt;Question
          icon={icon}
          description={description}
          question={question}
        /&gt;
      &lt;/div&gt;
    )
  }
}