Toggle function in React

Question

So at the beginning I know this code is messy. I have a div that I want to copy, when I click on the div, it opens up a Content and it copies that div. The thing I can't seem to accomplish is this, In that copied version of div/Image, I can close the content, but when I press on it again, I can't seem to open the component. If you don't fully understand it here is the sandbox https://codesandbox.io/s/confident-lake-uovir?file=/src/App.js

dannyxnda · Accepted Answer · 2021-02-28 12:05:51Z

2

You have ref in the first div so the click event can be checked with handleProject.

There are 2 functions run when you click the copied version.
onClick of the div triggers setIsProjectOpen(true), then the eventListenter you added to useEffect triggers setIsProjectOpen(false).
You can do this:

        <div
          onClick={(e) => {
            e.stopPropagation();
            setIsProjectOpen(!isProjectOpen)}};
          className={
            "smallProjects__container " + (isProjectOpen ? "active" : "")
          }
        >

answered Feb 28, 2021 at 12:05

dannyxnda

1,0421 gold badge12 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

Toggle function in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related