How do I pass different props with each click between siblings in React? (aka Lifting State Up)-CodePudding

Can someone help me figure out how to update content in the sibling drawer whenever the user clicks a different portfolio item? I understand that I need to lift the state up to the parent and then pass it down to the drawer, but I can't seem to figure it out. The prop I have been using as a test is the drawer title (drawerTitle).

Here is my codepen:

https://codepen.io/moorehannah/pen/zYROvyj?editors=0111

Here is my main component code:

class Home extends React.Component {
constructor(props) {
    super(props);
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this.state = {showDrawer: false, drawerTitle: 'initial title'};
}

toggleDrawer = (showDrawer, drawerTitle) => {
  this.setState(prevState => ({
    showDrawer: !prevState.showDrawer
  }))

  this.setState({
    drawerTitle: this.state.drawerTitle
  })
}

closeDrawer = () => {
    this.setState({showDrawer: false })
}

render() {
    const drawerTitle = this.state.drawerTitle;
    const showDrawer = this.state.showDrawer;

    return (
        <>
        <main>
          <CSSTransition
            in={showDrawer}
            timeout={{
              enter: 0,
              exit: 1000
            }}
            unmountOnExit
          >
         <Drawer 
           showDrawer={showDrawer} 
           drawerTitle={drawerTitle}
           onClose={this.toggleDrawer} 
          />
          </CSSTransition>
          <div className="grid">
            <PortfolioItem
                drawerTitle='test'
                onShowDrawerChange={this.toggleDrawer} />
            <PortfolioItem 
                drawerTitle='test 2'
                onShowDrawerChange={this.toggleDrawer} />
          </div>
        </main>  
        </>
    );
}

}

CodePudding user response：

you don't need to pass the drawer state since it's accessable within the closure.

you probably need to bubble the toggleDrawer function with a identifier for each item. in my example item1 & item2 are being set to the state based on their click event.

I think this answers your question

toggleDrawer = (drawerTitle) => {
      this.setState(prevState => ({
        showDrawer: !prevState.showDrawer, drawerTitle: drawerTitle
      }))

             <div className="grid">
                <PortfolioItem
                    drawerTitle='test'
                    onShowDrawerChange={()=>this.toggleDrawer("item1")} />
                <PortfolioItem 
                    drawerTitle='test 2'
                    onShowDrawerChange={()=>this.toggleDrawer("item2")} />
              </div>

CodePudding user response：

In your PortfolioItem component you want to pass the title to the onShowDrawerChange function

handleChange() {
        this.props.onShowDrawerChange(this.props.showDrawer, this.props.drawerTitle);
      
    }

Modify toggleDrawer to update the title

 toggleDrawer = (showDrawer, drawerTitle) => {
      this.setState(prevState => ({
        showDrawer: !prevState.showDrawer
      }))

      this.setState({
        drawerTitle: drawerTitle
      })
    }