I am trying to loop over nested object in using map on List Component from MUI. When performing click all elements are getting clicked.
This is my class component:
class TablePivot extends React.Component { constructor(props) { super(props) this.state = { pivotData: [], firstLevelOpen: false, secondLevelOpen: false, thirdLevelOpen: false, } handleFirstListClick = () =>{ this.setState({firstLevelOpen:!this.firstLevelOpen}) console.log(this.secondLevelOpen) } handleSecondListClick = () =>{ this.setState({secondLevelOpen:!this.secondLevelOpen}) console.log(this.secondLevelOpen) } handleThirdListClick = () =>{ this.setState({thirdLevelOpen:!this.thirdLevelOpen}) console.log(this.thirdLevelOpen) } render () { return ( <> <List> {Object.entries(this.state.pivotData).map((key, val) =>{ // console.log(key[1]) return ( <ListItemButton onClick = {event => this.handleFirstListClick}> <ListItemText primary={key[0]} /> {this.state.firstLevelOpen ? <ExpandLess /> : <ExpandMore />} {Object.entries(key[1]).map((key,index) =>{ return ( <Collapse in={this.state.firstLevelOpen} timeout="auto" unmountOnExit> <List component="div" disablePadding> <ListItemButton onClick = {this.handleSecondListClick} sx={{ pl: 4 }}> <ListItemText primary={key[0]} /> {this.state.secondLevelOpen ? <ExpandLess /> : <ExpandMore />} {Object.entries(key[1]).map((key,index) =>{ <Collapse in={this.state.secondLevelOpen} timeout="auto" unmountOnExit> <List component="div" disablePadding> <ListItemButton onClick = {this.handleThirdListClick} sx={{ pl: 4 }}> <ListItemText primary={key[1]} /> {this.state.thirdLevelOpen ? <ExpandLess /> : <ExpandMore />} {/* { Object.entries(key[1]).map((key,index) =>{ return (console.log[key]) }) } */} </ListItemButton> </List> </Collapse> }) } </ListItemButton> </List> </Collapse> ) })} </ListItemButton> ) })} </List> <Snackbar anchorOrigin={{ vertical : "top", horizontal : "right" }} open={this.state.alert} autoHideDuration={5000} onClose={() => this.setState({alert : false})}> <Alert variant="filled" elevation={6} onClose={() => this.setState({alert : false})} severity={this.state.severity}> {this.state.alertMsg} </Alert> </Snackbar> </> ) } I have tried passing index and event inside onclick like this:
handleFirstListClick(event, index) { console.log(event.target) this.setState( prevState => ({ ...prevState.firstLevelOpen, [index]: !prevState.firstLevelOpen }) ) console.log(this.state.firstLevelOpen) // if (this.state.firstLevel === true) // firstLevel[index] = false // else // firstLevel[index] = true // this.setState({firstLevelOpen:firstLevel}); } // Changes inside render() inside list component for passing value <ListItemButton onClick = {event => this.handleFirstListClick(event, val)}> But doing this will not update state properly. I am not understanding what is going wrong. I am learning react using project. I am struggling for this click event a lot.
