How to toggle css class in react with setState Hook

Question

I tried different ways. But don't manage to toggle this css class. The bookmark should become blue when I click on it. I got so far, I can change to false with onClick, but then it doesn't toggle back.
This is the ToggleBookmark Componenet:

const ToggleBookmark = () => {

const [selected, setSelected]=useState(true);

const  toggleBookmark = () => {
setSelected(true?false:true);
   }

return(
<svg className={`toggleBookmark ${selected ? "toggleBookmark-active" : ""}`} onClick={toggleBookmark} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 2v17.582l-4-3.512-4 3.512v-17.582h8zm2-2h-12v24l6-5.269 6 5.269v-24zm-14 1h-10v2h10v-2zm0 5h-10v2h10v-2zm0 5h-10v2h10v-2zm0 5h-10v2h10v-2z"/></svg>
)
}

score 1 · Answer 1 · answered Aug 21 '20 at 19:26

  const [selected, toggleSelected]=useState(false);
  return(
  <svg className={`toggleBookmark ${selected ? "toggleBookmark-active" : ""}`} onClick={()=>toggleSelected(!selected)} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.568.075c2.202 1.174 5.938 4.883 7.432 6.881-1.286-.9-4.044-1.657-6.091-1.179.222-1.468-.185-4.534-1.341-5.702zm-.824 7.925s1.522-8-3.335-8h-.409v12l-2.5-2.634-2.5 2.634v-12h-3v24h20v-13c0-3.419-5.247-3.745-8.256-3z"/></svg>
 )

And it is working. Thank you

Osama Bin Saleem · Answer 2 · 2021-06-29T09:21:31.257

0

You can achieve this by using findDOMNode. This question has been already answered here. Toggle Class in React

For functional components:

setSelected(!selected);

edited Jun 29 '21 at 09:21

answered Aug 21 '20 at 10:21

Osama Bin Saleem

779
1
12
24

Thank you. I seen that. But I would like to resolve it with Hooks. – Mano Aug 21 '20 at 16:02
As you see I use functional components – Mano Aug 21 '20 at 16:35
1

setSelected(!selected); – Osama Bin Saleem Aug 23 '20 at 09:14

score 0 · Answer 3 · answered Aug 21 '20 at 18:53

0

It doesn't turn back because your tri condition is always false. Use selected as the tri condition in order to change back instead of true: On line 5

answered Aug 21 '20 at 18:53

Gal Shacham

28
6

How to toggle css class in react with setState Hook

3 Answers3