there is a problem, I don't know how to implement the component technically correctly. I want to do conditional rendering of an element depending on the device screen. Example: if the screen is less than 700 px then I make one conclusion, if more then the second
if(window.innerWidth > 700) {
return(
<Content>
1
</Content>)
};
return (
<Content>
2
</Content>)
I use react, next js, and typeScript technologies
how to do this?
Create a width state in your component, and update state on window resize event, like this:
const App = () => {
const [width, setWidth] = React.useState(window.innerWidth);
const breakpoint = 700;
React.useEffect(() => {
const handleResizeWindow = () => setWidth(window.innerWidth);
// subscribe to window resize event "onComponentDidMount"
window.addEventListener("resize", handleResizeWindow);
return () => {
// unsubscribe "onComponentDestroy"
window.removeEventListener("resize", handleResizeWindow);
};
}, []);
if (width > breakpoint) {
return (
<div>
<h3>Component 1</h3>
<p>Current width is {width} px</p>
</div>
);
}
return (
<div>
<h3>Component 2</h3>
<p>Current width is {width} px</p>
</div>
);
}
class Root extends React.Component {
render() {
return (
<App/>
);
}
}
ReactDOM.render(<Root />, document.getElementById('root'));<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root">
</div>You can use ternary operator in react like this for conditional rendering of component.
{ window.innerWidth > 700 ? (
<Content>
1
</Content>
) : (
<Content>
2
</Content>
)
}
window.innerWidth is changed afterward.