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

React.js, I can't pass a state from a parent component to a child component – Reactjs

I have a react app that consists of a Layout component and everything else is wrapped in this layout.

I have an App.tsx file and the return part of the code looks like this:

return (
  <Layout>
    <div className='App'>
      {isConnected ? <SignedInHero /> : <NotSignedInHero />}
      <br />
      <br />
    </div>
  </Layout>
)

I’m trying to pass a state from the Layout component to the NotSignedInHero component. The return part of the Layout code looks like this:

return (
    <div>
        {isValid ? null : <Placeholder />}
        {isValid ? <Navbar /> : null}
        {isValid ? children : null}
    </div>
)

So if I had a useState variable like const [passed, setPassed] = useState('pass this'): How would I send it from Layout to NotSignedInHero?

Tags:

4

Answers


  1. 0

    you can pass it as a props in Layout:

    const [passed, setPassed] = useState('pass this');
return (
  <Layout>
    <div className='App'>
      {isConnected ? <SignedInHero /> : <NotSignedInHero passed={passed} />}
      <br />
      <br />
    </div>
  </Layout>
)

    and in NotSignedInHero:

    const NotSignedInHero = ({passed}) => {
  console.log(passed);
  return (
    <div>
        {isValid ? null : <Placeholder />}
        {isValid ? <Navbar /> : null}
        {isValid ? children : null}
    </div>
  )
}
    Login or Signup to reply.
  2. 0

    You pass it as a property. So

    return (
  <Layout>
    <div className='App'>
      {isConnected ? <SignedInHero /> : <NotSignedInHero passed={passed} />}
      <br />
      <br />
    </div>
  </Layout>
)

    and in NotSignedInHero:

    const NotSignedInHero = (props) => {
 const {passed} = props
}

    Edit: I think I understand after your comment. The passed variable is changed in the Layout component, and you need to pass it first up to the App component and then down to NotSignedInHero. If the variable is changed in a function inside Layout, you can do it like this:

    const Layout = (props) => {
  const { updateParent } = props
  
  function updatePassed(){
    setPassed('pass this')
    updateParent('pass this')
  }
}

    Then is the App component you do this:

    const [passed, setPassed] = useState('')

function updatePassed(newValue){
  setPassed(newValue)
}

return (
  <Layout updateParent={updatePassed}>
    <div className='App'>
      {isConnected ? <SignedInHero /> : <NotSignedInHero passed={passed} />}
      <br />
      <br />
    </div>
  </Layout>
)
    Login or Signup to reply.
  3. 0

    There are multiple ways to pass down props to child components. It depends a lot on the type and size of the project and which solutions to choose.

    The simplest solution is passing the prop down to child components using a render function. I personally don’t like this as much, but it does the trick without needing dependencies or creating a global state/context.

    Layout.jsx

    const Layout = ({ children }) => {
  const [passed, setPassed] = useState('pass this') ;

  return (
    <div>
        {isValid ? null : <Placeholder />}
        {isValid ? <Navbar /> : null}
        {isValid ? children({ passed }) : null} // <-- note that the `children` prop is a function
    </div>
  );
}

    return (
  <Layout>
    {({ passed }) => (
      <div className='App'>
        {isConnected ? <SignedInHero /> : <NotSignedInHero passed={passed} />}
        <br />
        <br />
      </div>
    )}
  </Layout>
)

    The second option is to use React Context, which enables having a global state without needing to do "prop drilling".

    The third option is to use a global state management tool like Zustand.

    Login or Signup to reply.
  4. 0 
    <>{isValid ? React.cloneElement(children, { passed }) : null}</>

    You can pass props to children by using cloneElement().

    See more: https://react.dev/reference/react/cloneElement

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search