title: How to use switch statement inside a React component?
body: <p>I have a React component, and inside the <code>render</code> method of the component I have something like this:</p>
  
  <pre><code>render() {
      return (
          &lt;div&gt;
              &lt;div&gt;
                  // removed for brevity
              &lt;/div&gt;
  
             { switch(...) {} }
  
              &lt;div&gt;
                  // removed for brevity
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Now the point is that I have two <code>div</code> elements, one at the top and one at the bottom, that are fixed. In the middle I want to have a switch statement, and according to a value in my state I want to render a different component. So basically, I want the two <code>div</code> elements to be fixed always, and just in the middle to render a different component each time. I'm using this to implement a multi-step payment procedure). Though, as is the code currently it doesn't work, as it gives me an error saying that <code>switch</code> is unexpected. Any ideas how to achieve what I want?</p>