React conditionally render based on viewport size

Question

This should be an easy one for you React monsters. :) I have the condition written but I can\'t figure out how to handle the viewport size in my constructor for the condition to

Answer 1

Just to post a recent update here after I had the same issue, but set it up using a functional component and the useEffect / useState React Hooks:

const MyFunction = () => {
  const [isDesktop, setDesktop] = useState(window.innerWidth > 1450);

  const updateMedia = () => {
    setDesktop(window.innerWidth > 1450);
  };

  useEffect(() => {
    window.addEventListener("resize", updateMedia);
    return () => window.removeEventListener("resize", updateMedia);
  });

  return (
    

      {isDesktop ? (
        
I show on 1451px or higher
      ) : (
        
I show on 1450px or lower
      )}
    
  );
}