How to toggle component display in reactjs

Question

I am currently learning reactjs so I decided to build a react to-do list, am trying to toggle the display of a component but keep running into errors. Please what is the best way to toggle the display of the Action component when the user clicks on the icon with the class 'ri-menu-line'? This is my snippet.My Code snippet

I tried using react useRef to toggle between an empty string and a className and pass it as a prop to the Action component and then, in the Action component add the prop to the section classList but i keep running into huge errors.

`useRef` isn't a great fit here, because [the reference doesn't cause a re-render](https://beta.reactjs.org/learn/referencing-values-with-refs#differences-between-refs-and-state) when it is updated. [`useState` would be a simple way to track this bit of state](https://stackoverflow.com/questions/72828609/how-toggle-works-in-react). — motto, Feb 18 '23 at 10:11

score 1 · Answer 1 · answered Feb 18 '23 at 10:17

1

Try doing this:

function App() {
  const [show, setShow] = useState(false);

  return (
    <body>
      <header>
        <h1></h1>
        <i onClick={() => setShow(!show)}></i>
        <main>
           {show && <Action />}
           <Detail />
       </main>
      </header>
    </body>
  );
}

answered Feb 18 '23 at 10:17

Mer Mer

83
11

Thanks a lot. This worked but ran into another problem. Also need the Action section to also toggle the show when clicked but is not working – michael25 Feb 18 '23 at 17:09
Can you show the Action.jsx source code ? – Mer Mer Feb 18 '23 at 17:58

score 1 · Answer 2 · answered Feb 18 '23 at 10:20

Toggle state to true/false. Use && to display or hide component. see https://beta.reactjs.org/learn/conditional-rendering

import { useState } from "react";

export default function App() {
  const [describeAppear, setDescribeAppear] = useState(false);
  const onClick=()=>{
    setDescribeAppear(!describeAppear)
  }
  return (
    <div className="App">
      <button onClick={onClick}>Toggle</button>
      {describeAppear && <h2>Start editing to see some magic happen!</h2>}
    </div>
  );
}

How to toggle component display in reactjs

2 Answers2