react js toggle problem when I visit from mobile

Question

I am trying to responsive my design. My logic is when the div style will be display:"block" it will show a basket and when the user will browse on mobile the div display will be none and the user need to click on the button to open the basket.

Now the problem is my default state is true that is why when a mobile user visits the website he will see first a basket that I don't want. I want when the user will first visit he will not see the basket he needs to click on the button. I can't set the default state to false because the desktop user can't see the basket.

// MY STATE
  const [toggle, setToggle] = useState(true);

<button onClick={() => setToggle(!toggle)}>Open</button>
<div
  className="box_order mobile_fixed"
  style={{ display: `${toggle ? "block" : "none"}` }}
  >
// BASKET CODE
</div>

Mirco Bellagamba · Accepted Answer · 2022-04-09 13:50:01Z

1

You could use window.matchMedia to set the initial value of the state.

The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.

For instance:

const [toggle, setToggle] = useState(window.matchMedia("max-width: 768px").matches);

answered Apr 9, 2022 at 13:50

Mirco Bellagamba

1,2288 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fathe Over a year ago

Thank you, but when I set the matchMedia query it is working on the mobile but it's not working on the desktop. now by default, the setToggle is false that's why the conditional class is displayed none for the desktop.

Mohammed Metwally Over a year ago

@Jerin, i think because you resize the browser window , if you show your page in desktop dimensions and hit refresh you will see it works.

Thibault Capelli · Accepted Answer · 2022-04-09 13:46:43Z

0

You can set the default value of toggle according to screen size with the media queries api. And listen for screen size change I you need.

Please take a look to this response: Media query syntax for Reactjs

answered Apr 9, 2022 at 13:46

Thibault Capelli

2081 silver badge7 bronze badges

Comments

MLDC · Accepted Answer · 2022-04-09 14:00:51Z

0

Are you using tailwindcss? follow this to add tailwind to your project through CDN https://tailwindcss.com/docs/installation/play-cdn.

Refactor your className like ${toggle ? "hidden" : "block"} sm:block and remove your style property. In mobile view, the div will always be hidden. It won't display it as a block because the media query sm:block will only display it as a block when the screensize reaches 768 width & more. This will only display the basket once you've click the button. Also use this convention for your setToggle function setToggle(prevState => !prevState).

answered Apr 9, 2022 at 14:00

MLDC

2111 silver badge4 bronze badges

3 Comments

Fathe Over a year ago

I am using bootstrap:(

MLDC Over a year ago

If that's the case, try className=md-block ${toggle ? "d-none" : "d-block"}. Don't forget to remove the style property

MLDC Over a year ago

my bad, top one doesn't work ${toggle ? "d-none d-md-block" : "d-block d-md-none"}.

kennarddh · Accepted Answer · 2022-04-09 14:15:42Z

0

Set the default state to false and use useState callback

// MY STATE
  const [toggle, setToggle] = useState(window.innerWidth > 700);

<button onClick={() => setToggle(toggleBefore => !toggleBefore)}>Open</button>
<div
  className="box_order mobile_fixed"
  style={{ display: toggle ? "block" : "none" }}
  >
// BASKET CODE
</div>

edited Apr 9, 2022 at 14:15

answered Apr 9, 2022 at 13:43

kennarddh

2,6572 gold badges10 silver badges30 bronze badges

1 Comment

Fathe Over a year ago

Not working, :(

Collectives™ on Stack Overflow

react js toggle problem when I visit from mobile

4 Answers 4

2 Comments

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related