Skip to content
Submitted over 1 year ago

Using React to complete challenge

react
vuson1709•120
@vuson1709
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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" />
  );
}
Code

Please log in to post a comment

Log in

Community feedback

  • Moulaye-dagnon•220
    @Moulaye-dagnon

    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

  • vuson1709•120
    @vuson1709

    I found the solution, here is my updated code:

    function Banner() {
  return (
    <picture>
      <source media="(min-width:800px )" srcSet={BannerDesktop} />
      <img src={BannerMobile} alt="Banner Mobile" className="banner-mobile" />
    </picture>
  );
}

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord