All comments

• 

  vuson1709• 120

  @vuson1709

  Submitted 9 months ago

  In App.js, I use this approach to change from illustration-sign-up-mobile.svg to illustration-sign-up-desktop.svg``` when width > 800px`. But I am not sure if this is a good solution because:

  1. When I change from desktop to mobile view using Chrome DevTool with dimension: iPhone SE, I have to refresh the page so that the website updates the mobile svg. Pic1 Pic2 Pic3
  2. when I change back from mobile to desktop, i have to refresh the page again so that the website updates the desktop svg of my image. Pic4 Pic5

  function Banner() {
    return window.screen.width > 800 ? (
      <img src={BannerDesktop} alt="Banner Desktop" className="banner-desktop" />
    ) : (
      <img src={BannerMobile} alt="Banner Mobile" className="banner-mobile" />
    );
  }
  

  

  Using React to complete challenge

  2

  20

  

  P

  Moulaye-dagnon• 220

  @Moulaye-dagnon

  Posted 9 months ago

  You can use the hooks for this :

       const [WidthScreem, setWidthSreem] = useState(window.innerWidth)
  useEffect(()=>{
  	const handleResize = ()=> setWidthSreem(window.innerWidth)
  	window.addEventListener('resize', handleResize)
  	return ()=> window.removeEventListener('resize', handleResize)
  },[])  
  

  A litle explain :

  const [WidthScreem, setWidthSreem] = useState(window.innerWidth) Here we used the state hook and initialized it with the screen size After , you can use an Event on the window so that every time the screen size changes we call seTsetWidthSreem() again . Here we can say that useEffect allows you to automatically refresh the page

  0