Hi friend ! Can you help me please?

[mike2020]

Hi friends!
I’d like to request your help with this react exercise.
I want the contain to display when I click the button otherwise it should disappear.
Thanks so much for your help…!
https://codepen.io/mike5485/pen/mdWRJqg?editors=0010

[a_aramini]

There’s a couple of ways to do that… maybe this will help:

onClick Event

or this…

React onClick Event Handler

[mike2020]

Thanks for your quick reply my friend. Unfortunately it doesn’t work for me.

[a_aramini]

What doesn’t work specifically? You need to set an event handler, then in your CSS you set the container with that id (that you’ve specified the id) to be hidden by default.

Are you using ReactJS, JS, JQuery…?

[mike2020]

Yes, I’m using ReactJS

[AndrewAung11]

@mike2020 If you have finished the event handling challenge you can add those handlers to make your code work or if you haven’t continue doing challenges. And for adding handlers only class which has extended to the React.Component object is only comfortable.

Hope this help

[mike2020]

it still doesn’t work…

[mike2020]

I want when I click the button the text displays…otherwise it should disappear…
https://codepen.io/mike5485/pen/mdWRJqg?editors=0010

[lasjorg]

Do you just want to hide and show the UL?

1. You need some state. For functional components you can use useState (Using the State Hook).

2. You can conditionally render JSX, for example, using the logical &&.

Example using your Codepen code

function App() {
  const [showText, setShowText] = React.useState(false);

  function clickHandler() {
    setShowText((state) => !state);
  }

  return (
    <div className="header">
      <button className="toggle" onClick={clickHandler}>
        <i class="fas fa-bars"></i>
      </button>
      {showText && (
        <ul>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
        </ul>
      )}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

[mike2020]

Thanks a lot my friend…It works…!