在 react js 中渲染新组件 onClick 的方法

Question

Am trying to render a new component onclick a button in react js. Am using functional components and I can't handle it. Eg: am in the UserManagement component and on a button click I need to render another component named employee management.

Answer 1

You can conditionally render your component.

Example :

EmployeeManagement.js

const EmployeeManagement = () => {
   ....

   return (
    <div>
      EmployeeManagement
    </div>
  );
}

UserManagement.js

const UserManagement = () => {
   const [hasRender, setRender] = useState(false);
   const onShow = React.useCallback(() => setRender(true), []);


   return (
     <>
      <button onClick={onShow}>Show Employee Management</button>
      {hasRender && <EmployeeManagement />}
    </>
   )
}

Answer 2

use a visible state & toggle it in onClick:

const [visible, setVisible] = useState(false)

onClick = () => {setVisible(true)}

then render it like this:

{visible && <EmployeeManagement onClick={onClick} />}

Answer 3

One way to do this would be to add a local state in UserManagement ,
that holds a boolean value indication whether the component should be hidden or shown.

Then you will have something like:

function UserManagement() {
   const [compIsShown, setCompIsShown] = useState(false);

   return (
      // Whatever else you're rendering.
      <button onClick={() => setCompIsShown(true)}>...</button>
      {compIsShown && <OtherComp />}
   )
}

What will happen is that compIsShown will initialize as false,
so this condition compIsShown && <OtherComp /> will prevent it from rendering.
Then, when you click the button, the state will set, causing a re-render, except now the condition will be true, so <OtherComp> will be rendered.

There are other ways to go about this.
Depends mostly on the use-case.