Toggle div of child component from parent React

Question

I'm trying to toggle between two views of the child component BottomSheet, by passing the toggleConfig prop to the child component. However, it does not seem to trigger when pressing the "Toggle Config" button.

Apps.js

function App() {
  const [toggle, setToggle] = useState(false);
  const [toggleConfig, setToggleConfig] = useState(false);
  const handleToggle = () => {
    setToggle(!toggle);
  }

  const handleConfigView = () => {
    setToggleConfig(!toggleConfig);
  }

  return (
    <div className="App" ref={refContainer}>
    <button onClick={handleToggle}>Toggle Bottom Sheet</button>
    <button onClick={handleConfigView}>Toggle Config</button>
      {toggle && 
      <animated.div style={props} ref={refContainer2}>
      <BottomSheetComponent 
        toggle={handleToggle} 
        toggleConfig={handleConfigView}
        header="My Custom Title" 
        subHeader="Some more information here"
      >
        This is the body of the content section.
      </BottomSheetComponent></animated.div>}
    </div>
  );
}

BottomSheet

const BottomSheet = ({toggle, toggleConfig, ...props}) => {
    return (
       <div className={classes.bottomSheetContainer} style={{transform: 'translateY(calc(-40vh + 0px))'}}>
            <div className={classes.headerDragger}></div>
            <svg onClick={toggle} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                className={classes.closeButton} style={{ position: 'absolute', right: 16, top: 16 }}>
                <path d="M17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071Z" fill="#191919"></path></svg>
            <h1 className={classes.header}>{props.header}</h1>
            <h2 className={classes.subHeader}>{props.subHeader}</h2>
            {toggleConfig ? (
            <div>
                <div className={classes.contentContainer}>
                    <div style={{ background: 'linear-gradient(rgb(230, 100, 101), rgb(145, 152, 229))', height: 800 }}>
                        <h1 style={{ color: '#ffffff', padding: 8, fontSize: 18 }}>
                            {props.children}
                        </h1>
                    </div>
                </div>
            </div>):(
                <div>
                    <div className={classes.contentContainer}>
                    <p>toggle: {toggle}</p>
                    </div>
                </div>
            )}
        </div>
    )
}

Codesandbox of current state of component: https://codesandbox.io/s/green-sky-n098b?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

Always make sure you check the console for errors. "Warning: useEffect received a final argument that is not an array (instead, received function). When specified, the final argument must be an array." — Mike
Even removing the dependency array, I still can't trigger the view toggle of the child component. — Matt
That wasn't the point. He simply pointed out that you're using useEffect incorrectly. Back to the problem at hand - what are you trying to trigger in the child component? What's supposed to happen when you click "Toggle Config"? — codemonkey
@codemonkey - as you can see from the BottomShelf component, the toggleConfig state value is supposed to toggle between the main view and another view that shows the value of {toggle}.. — Matt
Did you mean BottomSheet. Cuz I don't see BottomShelf. And in BottomSheet, the toggleConfig doesn't do anything. I see you're accepting it, but it's not involved in any logic. So I frankly am not sure what's supposed to happen. — codemonkey

Rey Young Rey Young · Accepted Answer · 2021-03-14T04:14:48

Since, you have a problem with your useEffect in you codesandbox. I didn't put my effort to debug it. But by looking at your code. You should have passed the state rather than the callback in toggleConfig.

 <BottomSheetComponent 
        toggle={handleToggle} 
        toggleConfig={handleConfigView} // it should be toggleConfig
        header="My Custom Title" 
        subHeader="Some more information here"
      >
        This is the body of the content section.
      </BottomSheetComponent></animated.div>}

I'm suggesting that you need to pass toggleConfig because later in your code you're doing

{toggleConfig ? 'show a div' : 'show a button to toggle'}

let me know if that is the problem.

Toggle div of child component from parent React

1 Answers