Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

171
Visualizações
Way to render a new component onClick in react js

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.

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

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 />}
    </>
   )
}
about 4 years ago · Juan Pablo Isaza Relatório

0

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} />}
about 4 years ago · Juan Pablo Isaza Relatório

0

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda