How to use if else in jsx for media query - reactjs

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.

Answer 1

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>
)
}