title: React JSX in className if-else syntax
body: <p>I am currently working on a react app where I am adding and changing classes based on certain state changes. It worked successfully in testing with a ternary operator but now I realized I will have to add mutiple else-if statements so I am trying to convert it to a classic if else format but am getting syntax errors and I'm not sure how to do it.</p>
  
  <p>Here is the ternary operator that worked fine:-</p>
  
  <pre><code>&lt;div className={"wrapper " + (this.state.hot ? 'wrapper-gradient-hot' : 'wrapper-gradient-cold')}&gt;
  </code></pre>
  
  <p>Here is my attempt to make it a classic if-else in JSX and failed:-</p>
  
  <pre><code>&lt;div className={"wrapper " + (
                          if (this.state.hot) {
                              return 'wrapper-gradient-hot';
                          } else {
                              return 'wrapper-gradient-cold';
                          }
                      )}&gt;
  </code></pre>
  
  <p>Pls help me out :)</p>