How to update the state in different mobile screens using React Hooks - reactjs

Question

I am working on React project, In that I have a button under that I have another div, I written a function if My screen width is 320px then margin-bottom: 150px has to apply under button. it is working fine, but when I am in 320px screen if I click the button then under button margin-bottom: 150px is applied. Here the problem comes now when I go to 375 px here also margin-bottom: 150 px applied automatically. so someone help to how to update state in 375px. Because in 375px screen I have to apply margin-bottom: 300 px.
If you have any questions please let me know thank you.
This is My code
This is App.js
import React, { useState, useLayoutEffect } from 'react';
import './App.css';
const App = () => {
const [style, setStyle] = useState(null)
function useMediaQuery() {
const [screenSize, setScreenSize] = useState([0]);
useLayoutEffect(() => {
function updateScreenSize() {
setScreenSize([window.innerWidth]);
}
window.addEventListener("resize", updateScreenSize);
updateScreenSize();
return () => window.removeEventListener("resize", updateScreenSize);
}, []);
return screenSize;
}
const [mediaQuery] = useMediaQuery();
console.log(mediaQuery, '***')
const applyStyle = () => {
if(mediaQuery === 320) {
setStyle({
marginBottom: '150px'
})
}
}
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='first'>
<button onClick={applyStyle} style={style} className='btn btn-primary'>Click here</button>
<span className='closeWindow'><i className="far fa-window-close"></i></span>
</div>
<div className='second'>
</div>
</div>
</div>
</div>
)
}
export default App

Answer 1

in App.css write a #media query:
#media screen and (max-width: 375px) {
button {
margin-bottom: 300px;
}
}

Answer 2

You can apply media queries in React either programmatically, or using css.
Option 1, using css:
.myButton{
/* media queries */
#media (max-width: 320px) {
margin-bottom: 150px;
}
#media (max-width: 375px) {
margin-bottom: 300px;
}
}
and then:
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='first'>
<button onClick={applyStyle} className='myButton btn btn-primary'>Click here</button>
<span className='closeWindow'><i className="far fa-window-close"></i></span>
</div>
<div className='second'>
</div>
</div>
</div>
</div>
)
Option 2, programmatically:
import React, { useState, useEffect, useLayoutEffect } from 'react';
import './App.css';
const App = () => {
const [mediaMatch, setMediaMatch] = useState();
const handler = e => setMediaMatch(e.matches);
useEffect(() => {
window.matchMedia('(min-width: 768px)').addListener(handler);
return () => {
window.removeEventListener(handler);
};
}, []);
return (
<div className="container">
<div className="row">
<div className="col-12">
<div className="first">
<button
onClick={applyStyle}
style={{
marginBottom: mediaMatch ? '300px' : '150px'
}}
className="btn btn-primary"
>
Click here
</button>
<span className="closeWindow">
<i className="far fa-window-close" />
</span>
</div>
<div className="second" />
</div>
</div>
</div>
);
};