Render component in different order depending on screen-size (React)
<p>I'm trying to work out how I would render a component differently in mobile view (I would like it to appear before my header in mobile, but after otherwise)</p>

<p>The code I have at the minute is</p>

<pre><code>import React from 'react';
import NavigationBar from './NavigationBar';
import SiteHeader from './SiteHeader';

export default class App extends Component {

  constructor(props) {
     super(props);
     let width = window.innerWidth;
     if (width &gt; 768) {
       this.setState(renderComponent =
         `&lt;div className="container"&gt;
           &lt;NavigationBar /&gt;
           &lt;SiteHeader /&gt;
           {this.props.children}
         &lt;/div&gt;`
       );
     } else {
       this.setState(renderComponent =
         `&lt;div className="container"&gt;
           &lt;NavigationBar /&gt;
           &lt;SiteHeader /&gt;
           {this.props.children}
         &lt;/div&gt;`
       );
     }
   }

  render() {

    return (
      {renderComponent}
    );
  }

}
</code></pre>

<p>However this is not working (Component is not defined), I figured I couldn't just set the component as strings but hopefully this is enough info for any suggestions on the correct way to do it</p>

<p>Thanks!</p>