How to use if else in jsx for media query

Question

import React, { Component, useState } from 'react'
class input extends Component {
    constructor(props) {
        super(props)
        this.state = {
                     show:true
        };
 ShowHide=()=>{
        this.setState({
            show:!this.state.show
        });
       render() {
        
       return (
         <>
            {this.state.show} ?
             <div>
               <h1>Hello world</h1>
             </div>
              :
             <div>
               <h1>How are you?</h1>
             </div>
             <button onClick={this.ShowHide()}>Button</button>
            }
        </>

    }

export default input

How to use those jsx for media query(desktop and mobile version) I need to know how to use sample.js(not css). How to use jsx part in render for mobile version. In desktop version I have to display both message Hello world and how are you?. In mobile version I have to use hide and show.

You can get the window height and width with `window.width`. Read more [here](https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs). Do this if you don't want to install third-party library — kunquan, Nov 30 '20 at 12:43

score 0 · Answer 1 · answered Nov 30 '20 at 12:43

You can have a look at this npm package called react-responsive: https://www.npmjs.com/package/react-responsive

It will allow you to do stuff like this :

import React from 'react'
import { useMediaQuery } from 'react-responsive'
 
const Example = () => {
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
 
  return (
    <div>
      <h1>Device Test!</h1>
      {isTabletOrMobile ? <p>You are on a tablet or a mobile p</p> : <p>You're on desktop</p>}
    </div>
  )
}

How to use if else in jsx for media query

1 Answers1