I'm need make Collapse menu from array data,

now i'm click any menu but expand all sub menu

I think my problem is i'm can,t set unique state "open" for Main menu

I don't want to be assigned "state" To support additional data in the future that may have 3 or 4

I'm use React.js, material-ui

please help me

thank you very much

const myData = [
  {
    id: '1',
    nameHeader: 'Header1',
    subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
  },
  {
    id: '2',
    nameHeader: 'Header2',
    subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
  }
]

class Myclass extends Component {
  state = { open: false }

  handleClick = () => {
    this.setState(state => ({ open: !state.open }))
  }

  render() {
    const { open } = this.state
    return (
      <div style={{ marginRight: '15px' }}>
        <List ponent="nav">
          {myData.map(each => (
            <React.Fragment key={each.id}>
              <ListItem button onClick={this.handleClick}>
                <ListItemText inset primary={each.nameHeader} />
                {open ? <ExpandLess /> : <ExpandMore />}
              </ListItem>
              <Divider />
              <Collapse in={open} timeout="auto" unmountOnExit>
                <List ponent="div" disablePadding>
                  {each.subMenu.map(subData => (
                    <ListItem key={subData.id} button>
                      <ListItemText inset primary={subData.name} />
                    </ListItem>
                  ))}
                </List>
              </Collapse>
            </React.Fragment>
          ))}
        </List>
      </div>
    )
  }
}
export default Myclass

I'm need make Collapse menu from array data,

now i'm click any menu but expand all sub menu

I think my problem is i'm can,t set unique state "open" for Main menu

I don't want to be assigned "state" To support additional data in the future that may have 3 or 4

I'm use React.js, material-ui

please help me

thank you very much

const myData = [
  {
    id: '1',
    nameHeader: 'Header1',
    subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
  },
  {
    id: '2',
    nameHeader: 'Header2',
    subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
  }
]

class Myclass extends Component {
  state = { open: false }

  handleClick = () => {
    this.setState(state => ({ open: !state.open }))
  }

  render() {
    const { open } = this.state
    return (
      <div style={{ marginRight: '15px' }}>
        <List ponent="nav">
          {myData.map(each => (
            <React.Fragment key={each.id}>
              <ListItem button onClick={this.handleClick}>
                <ListItemText inset primary={each.nameHeader} />
                {open ? <ExpandLess /> : <ExpandMore />}
              </ListItem>
              <Divider />
              <Collapse in={open} timeout="auto" unmountOnExit>
                <List ponent="div" disablePadding>
                  {each.subMenu.map(subData => (
                    <ListItem key={subData.id} button>
                      <ListItemText inset primary={subData.name} />
                    </ListItem>
                  ))}
                </List>
              </Collapse>
            </React.Fragment>
          ))}
        </List>
      </div>
    )
  }
}
export default Myclass

• javascript
• reactjs
• material-ui

1 Answer 1

I think my problem is i'm can,t set unique state "open" for Main menu

Somehow, yes. You have two different (sub) menus you like to collapse / expand without having an effect on the other menu. This in mind, you need to create a possibility to save the current 'open' state for each of the menus separately.

You already have a unique id for your different menus, you can use them in order to achieve your goal. One way would be to extend your state with the related settings for your menus:

state = { settings: [{ id: "1", open: false }, { id: "2", open: false }] };

This allows you to have the information about the collapsed status of each of your menus.

According to that you need to extend your handleClick function a bit in order to only change the state of the menu item you clicked:

handleClick = id => {
  this.setState(state => ({
    ...state,
    settings: state.settings.map(item =>
      item.id === id ? { ...item, open: !item.open } : item
    )
  }));
};

And in your render function you need to make sure that you pass the right id of the menu item you clicked to your handleClick function and that you select the right open state.

<React.Fragment key={each.id}>
  <ListItem button onClick={() => this.handleClick(each.id)}>
    <ListItemText inset primary={each.nameHeader} />
    settings.find(item => item.id === each.id).open
    ? "expanded"
    : "collapsed"}
  </ListItem>
  <Divider />
  <Collapse
    in={settings.find(item => item.id === each.id).open}
    timeout="auto"
    unmountOnExit
  >
  <List ponent="div" disablePadding>
    {each.subMenu.map(subData => (
      <ListItem key={subData.id} button>
        <ListItemText inset primary={subData.name} />
      </ListItem>
     ))}
   </List>
 </Collapse>
</React.Fragment>

See it working here: https://codesandbox.io/s/6xjz837j9z