React conditionally render based on viewport size : <p>This should be an easy one for you React monsters. :) I have the condition written but I can't figure out how to handle the viewport size in my constructor for the condition to work. Plain and simple, I want to show one element when the viewport size is 1451px or wider and another when 1450px or smaller.</p>

<p>This is my code (simplified)</p>

<pre><code>class My Class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isDesktop: "1450px" //This is where I am having problems
        };
    }

    render() {
        const isDesktop = this.state.isDesktop;

        return (
            &lt;div&gt;
                {isDesktop ? (
                    &lt;div&gt;I show on 1451px or higher&lt;/div&gt;
                ) : (
                    &lt;div&gt;I show on 1450px or lower&lt;/div&gt;
                )}
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>Perhaps I am suppposed to work it with ComponentWillMount or ComponentDidMount. Honestly, not sure. I'm new with React.</p>

<p>Thanks in advance guys.</p>
