React: How to pass State value to another component and use it to render a component

Question

I hope everyone is doing well.

So I have a Hamburger component inside of a Toolbar component that's inside of LandingPage component. I have a state hook inside of the Hamburger component. I am passing down the value of the state to the LandingPage component by using props through Toolbar and eventually to the LandingPage component. I then have a ternary operator inside of my sections in my LandingPage component to display a new component (called NavigationMenu) when it's true and not display it when its false. When I click the hamburger menu, I can see that the boolean value is being passed up to the LandingPage constant via. console.logging, but the ternary operator seems to not dynamically update the boolean value and not render the Navigation Page.

https://codesandbox.io/s/gifted-cache-kqfz9

Above is the working code of the hamburger bar. You can see in the console that the value being passed down to the LandingPage is being updated, but the ternary operator (at the BOTTOM of the LandingPage.jsx) is not loading the navigation page.

LandingPage jsx:

import React from 'react'

import Toolbar from './Toolbar'
import NavigationMenu from './NavigationMenu'

function LandingPage(props) {

const burgerStatus = []

return (
  <div className='landing-container' >
    <Toolbar burgerStatus={burgerStatus} />

    {burgerStatus[0] ? <NavigationMenu /> : null}
  </div>
)
}

export default LandingPage

Toolbar.jsx:

import React from 'react'
import Hamburger from './Hamburger'


function Toolbar(props) {
return (
    <div className='navbar' >
      <Hamburger burgerStatus={props.burgerStatus} />
    </div>
)}

export default Toolbar

Hamburger.jsx:

import React, { useRef, useEffect, useState } from 'react'
import './Hamburger.scss'


function Hamburger(props) {

  const [burgerClick, setBurgerClick] = useState(true)

  props.burgerStatus[0] = burgerClick


  function clickBurger() {
    setBurgerClick(prev => {
      return (!burgerClick)
    })  

    if (burgerClick === true) {
       props.burgerStatus[0] = true
       console.log(props.burgerStatus[0])
    } else {
      props.burgerStatus[0] = false
       console.log(props.burgerStatus[0])
    }
  }



  return (
    <div className="hamburger" onClick={clickBurger} >
        <div className="line1"></div>
        <div className="line2"></div>
        <div className="line3">
          <div className="blankLeft"></div>
          <div className="line3-right"></div>
        </div>
    </div>

  )
}


export default Hamburger

I've included the code above. Thank you for your time.

Answer 1

Welcome to SO.

In regards to your issue. You seem to updating props inside the child component. Props pass from parent to child.

<LandingPage burgerStatus> => <Toolbar burgerStatus={burgerStatus} /> => <Hamburger burgerStatus={props.burgerStatus} />

In the Hamburger component you're doing

  const [burgerClick, setBurgerClick] = useState(true)

  props.burgerStatus[0] = burgerClick

In react updating data in the parent is done using callback functions. See this

Child to Parent — Use a callback and states

• Define a callback in my parent which takes the data I need in as a parameter.

• Pass that callback as a prop to the child (see above).

• Call the callback using this.props.[callback] in the child (insert your own name where it says [callback] of course), and pass in the data as the argument.

So I would have

  const [burgerClick, setBurgerClick] = useState(true)

in the parent ( <LandingPage> ) and pass it as props to Hamburger.

<Hamburger burgerStatus={props.burgerStatus} setBurgerStatus={props.setBurgerClick} />

In Hamburger you can have <button onClick = {props.setBurgerClick(true)}/> or <button onClick = {props.setBurgerClick(false)}/> on a button click. Since this updates props in he parent, the props should pass down correctly.

Also take a look at this. Props are read only