Hi friend ! Can you help me please?

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…!

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

onClick Event

or this…

React onClick Event Handler

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

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…?

Yes, I’m using ReactJS

@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

it still doesn’t work…:slightly_smiling_face:

I want when I click the button the text displays…otherwise it should disappear… :slightly_smiling_face:

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>
      {showText && (

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

Thanks a lot my friend…It works…! :slightly_smiling_face:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.