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

138
Visualizações
How to props through the deeply nested child to parent data ? React

To explain the situation. I have a child component that has one chevron that spins on a click. I need to implement from child to parent and to grand parent props data.

<ChildComponent>
<ParentComponent>
<GrandParentComponent>

Inside ChildComponent I have arrow icon ( img )

  const [rotateIcon, setRotateIcon] = useState(false);

  const expandAttachment = useCallback(() => {
    setRotateIcon(!rotateIcon); 
  }, [rotateIcon]);


  <img src="assets/arrow" transform={rotateIcon ? 'rotate(90deg)' : 'rotate(0)'} >

And this is work but.... I need to props rotateIcon state to GrandParentComponent compoentent.

It’s not just the child to the parent. Than child to parent and from parent another level up to. GrandParent.

How do I do that? Is this a good way at all? What are my alternatives? I do not use redux in the system, but api context!

To be clear. All three components are connected. Each to each is a child parent!

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

0

You can do prop drilling i.e, adding a state to <GrandParentComponent/> component and passing it as prop to the child components.

grandparent

export default GrandParentComponent(){
    const [rotateIcon, setRotateIcon] = useState(false);

    // pass the state and setState down to the children
    return <ParentComponent rotateIcon={rotateIcon} setRotateIcon={setRotateIcon}/> 
}

parent

export default ParentComponent({rotateIcon, setRotateIcon}){
    // pass props to child component again
    return <ChildComponent rotateIcon={rotateIcon} setRotateIcon={setRotateIcon}/> 
}

child

export default ChildComponent({rotateIcon, setRotateIcon}){
  const expandAttachment = useCallback(() => {
    setRotateIcon(!rotateIcon); 
  }, [rotateIcon]);

  <img src="assets/arrow" transform={rotateIcon ? 'rotate(90deg)' : 'rotate(0)'} >
}

There’s nothing inherently bad about prop drilling, but it gets harder to manage the state of the app as the complexity increases.

To avoid this we either use React Context or Redux. React Context is baked into react itself, so it's very lightweight and powerful at the same time. It is the perfect fit for a situation like yours.

To keep the answer short, read on how to implement React Context and useContext hook here.

about 4 years ago · Juan Pablo Isaza Relatório

0

store the state in the GrandParentComponent and pass through in between components as a prop to reach ChildComponent. Props are meant to be passed from a parent component to a child component(s).

about 4 years ago · Juan Pablo Isaza Relatório

0

As I see it you have 3 options:

  1. Store the state props in the parent of all components, which is too complex for this purpose I think.
  2. Use Redux to handle state management for the app
  3. Use Context API to handle the state management for the app as a global state. You can check out this blog for this: https://www.loginradius.com/blog/engineering/react-context-api/#:~:text=What%20is%20Context%20API%3F,to%20parent%2C%20and%20so%20on.

I do however use and recommend using redux for complex operations like this. When you understand the idea behind redux it becomes very easy to use it.

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