title: Understanding how to make React website mobile friendly
body: <p>I've been playing around with <a href="https://www.npmjs.com/package/react-responsive" rel="nofollow noreferrer">react-responsive</a> to understand how to make websites mobile-friendly. Essentially, what I want to do is pass in a value from a function that tests whether a viewing screen is sized like a mobile phone. Practically stolen from the documentation of react-responsive, I have a function in a file called Mobile.js as follows:</p>
  
  <pre><code>const Mobile = () =&gt; {
    const mobile = useMediaQuery({ query: '(max-width: 1000px)' })
    return (
      &lt;div&gt;
        {mobile &amp;&amp; &lt;p&gt;You are sized like a mobile phone&lt;/p&gt;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>However, what I want to be able to do is pass the boolean "mobile" into other classes in other js files where I can then use different CSS classNames depending on the value of this boolean.</p>
  
  <p><strong>I have 3 specific questions.</strong></p>
  
  <ol>
  <li><p>How would I return the boolean mobile from the Mobile function to be used?</p></li>
  <li><p>How would I access this returned boolean?</p></li>
  <li><p>How would I change the className of a div depending on the value of this boolean?</p></li>
  </ol>
  
  <p><strong>Pretty new to web development (especially React) and these questions seem super simple and easy to solve, but for some reason, I just can't seem to figure it out by my own online research. Would love direct help and also some resources where I could learn more. Thank you so much!</strong></p>
  
  <p>To me, in a perfect world, the right code would look like this in my mind. Not sure how far off I am, but I was hoping maybe this could be of some guidance as to how I'm thinking.</p>
  
  <p>In the function file,</p>
  
  <pre><code>// FILE Mobile.js
  const Mobile = () =&gt; {
    const mobile = useMediaQuery({ query: '(max-width: 1000px)' })
    return (
      { mobile } // how to return a value?
    );
  }
  
  export default Mobile;
  </code></pre>
  
  <p>In another file,</p>
  
  <pre><code>// FILE OtherClass.js
  import Mobile from './Mobile';
  class OtherClass extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = { mobile: &lt;Mobile /&gt; } // how to access the returned value?
    }
  
  
    render() {
      return (
        &lt;div&gt;
          {this.state.mobile &amp;&amp; &lt;div className="text-mobile"&gt;} // how to change the className depending on value?
          {!this.state.mobile &amp;&amp; &lt;div className="text-desktop"&gt;}
            blah blah blah blah blah
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>