Question 74122 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to toggle component display in reactjs

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.

Tags:

2

Answers


  1. 0

    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>
  );
}
    Login or Signup to reply.
  2. 0

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search