Creating a dynamic state management system for multiple Collapse components can be achieved by utilizing

Question

Creating a dynamic state management system for multiple Collapse components can be achieved by utilizing

I am trying to create a Collapse menu from array data,

Currently, when I click on any menu all sub menus expand

I believe my issue lies in not being able to set a unique "open" state for each Main menu

I want to avoid assigning a "state" to accommodate potential future data that may have 3 or 4 levels

I am using React.js and material-ui

Please assist me with this problem

Thank you in advance

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 component="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 component="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

Answer 1

Answer №1

I am facing an issue where I am unable to set a unique state of "open" for the Main menu.

It seems like you have two different sub menus that you want to collapse/expand independently without affecting each other. To achieve this, you need to implement a way to store the current 'open' state for each menu separately.

You already have unique IDs for your menus, so you can use them to reach your objective. One approach is to enhance your state by including specific settings for each menu:

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

This structure will allow you to track the collapsed status of each menu.

To handle this, you should modify your handleClick function to only update the state of the clicked menu item:

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

In your render function, ensure that you pass the correct menu item ID to your handleClick function and select the appropriate 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 component="div" disablePadding>
    {each.subMenu.map(subData => (
      <ListItem key={subData.id} button>
        <ListItemText inset primary={subData.name} />
      </ListItem>
     ))}
   </List>
 </Collapse>
</React.Fragment>

View the solution in action here: https://codesandbox.io/s/6xjz837j9z

Answer 2

I am facing an issue where I am unable to set a unique state of "open" for the Main menu.

It seems like you have two different sub menus that you want to collapse/expand independently without affecting each other. To achieve this, you need to implement a way to store the current 'open' state for each menu separately.

You already have unique IDs for your menus, so you can use them to reach your objective. One approach is to enhance your state by including specific settings for each menu:

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

This structure will allow you to track the collapsed status of each menu.

To handle this, you should modify your handleClick function to only update the state of the clicked menu item:

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

In your render function, ensure that you pass the correct menu item ID to your handleClick function and select the appropriate 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 component="div" disablePadding>
    {each.subMenu.map(subData => (
      <ListItem key={subData.id} button>
        <ListItemText inset primary={subData.name} />
      </ListItem>
     ))}
   </List>
 </Collapse>
</React.Fragment>

View the solution in action here: https://codesandbox.io/s/6xjz837j9z

Creating a dynamic state management system for multiple Collapse components can be achieved by utilizing

Answer №1

Similar questions

JavaScript encounters difficulty in reading the text file

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Learn the art of generating multiple dynamic functions with return values and executing them concurrently

The table fails to refresh after adding, modifying, or removing a row

Displaying a collection of items using Rails, implementing form_for and integrating Ajax functionality

Previous states in TypeScript

How can I change the "Return" button on the iOS keyboard to a "Next" button using jQuery or JavaScript?

Is there a way to run a node script from any location in the command line similar to how Angular's "

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Unable to access external library using browserify and debowerify

Easily toggle between different content within the same space using Twitter Bootstrap Tabs feature. Display the tabs

Does the onwheel event get triggered when scrolling on a trackpad?

What could be causing the web page to refresh at regular intervals?

Mirror Image Iframes

Tips for running Scrapy and Selenium on a webpage that utilizes angular JavaScript to serve data

Conceal the element if the offspring is devoid of content

When testing, React does not trigger a rerender when a state change occurs

JavaScript multi-click navigation menu

Choose2 incorporate on change