When I click on the post button it opens all buttons like media and user .i tried to define state function but when i click one button all buttons are open simultaneously.
this problem i am facing
My code are here
export default function ListItem() {
const [open, setOpen] = React.useState(false);
const handleClick = () => {
setOpen(!open);
};
return (
<div>
<List
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
component="nav"
aria-labelledby="nested-list-subheader"
>
{/* dashbord */}
<ListItemButton component="a" href="#simple-list">
<ListItemIcon>
<DashboardTwoToneIcon />
</ListItemIcon>
<ListItemText primary="DashBoard" />
</ListItemButton>
{/* post */}
<ListItemButton onClick={handleClick}>
<ListItemIcon>
<PostAddTwoToneIcon />
</ListItemIcon>
<ListItemText primary="Post" />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }} component="a" href="#">
<ListItemText primary="New post" component="a" />
</ListItemButton>
<ListItemButton sx={{ pl: 4 }} component="a" href="#">
<ListItemText primary="All posts" />
</ListItemButton>
</List>
</Collapse>
{/* Media */}
<ListItemButton onClick={handleClick}>
<ListItemIcon>
<SubscriptionsTwoToneIcon />
</ListItemIcon>
<ListItemText primary="Media" />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }} component="a" href="#">
<ListItemText primary="All Media" component="a" />
</ListItemButton>
<ListItemButton sx={{ pl: 4 }} component="a" href="#">
<ListItemText primary="Add New Media" />
</ListItemButton>
</List>
</Collapse>
You are using a single boolean state for all of them. I suggest storing the open status of each item/element you want to toggle in an object and check if the specific item/element is currently toggled open.
const [open, setOpen] = React.useState({});
const handleClick = (id) => () => {
setOpen(open => ({
...open,
[id]: !open[id],
}));
};
...
<ListItemButton onClick={handleClick("post")}> // <-- pass id
<ListItemIcon>
<PostAddTwoToneIcon />
</ListItemIcon>
<ListItemText primary="Post" />
{open["post"] ? <ExpandLess /> : <ExpandMore />} // <-- check by id
</ListItemButton>
<Collapse
in={open["post"]} // <-- check by id
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }} component="a" href="#">
<ListItemText primary="New post" component="a" />
</ListItemButton>
<ListItemButton sx={{ pl: 4 }} component="a" href="#">
<ListItemText primary="All posts" />
</ListItemButton>
</List>
</Collapse>
Apply same for other buttons and collapsables but using specific unique keys.
You call function setOpen on a click on any object, however setOpen seems to change the state of a global variable that is used to determine whether the contents should be shown or not. Try to set a unique variable as open state for every button and only change this variable with a function in onClick
Related
My problem its quite simple but i not know how to solve that, when the Drawer from MaterialUI is opened are added some css into the body in my page, and one of the css add a padding-right and that are screwing the page indentation.
Drawer closed:
Drawer opened:
The problem:
Code:
<React.Fragment key={"menu-button"} >
<MenuIcon onClick={toggleDrawer(true)} />
<Drawer
anchor={"left"}
open={state}
onClose={toggleDrawer(false)}
>
<Box
sx={{ width: 250, height: '100%'}}
className={styles.background}
role="presentation"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
>
<List>
{['About me', 'Projects', 'Experience', 'Education'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton className={styles.option}>
<ListItemIcon className={styles.optionIcon}>
{icons[index]}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
</Drawer>
</React.Fragment>
The styles are adding only colors.
I fixed adding "disableScrollLock={ true }" into the Drawer component :)
Default direction of ListItemIcon is ltr and it start from left to right.
How can I change the default behaviour ?
Any idea apperciate.
code snipped :
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
{<CloseIcon style={{ direction: "rtl" }} />}
</ListItemIcon>
</ListItemButton>
</ListItem>
Try like this.
<ListItem>
<ListItemText primary="Hello" />
<IconButton edge="end">
<CloseIcon />
</IconButton>
</ListItem>
You can specify how you want to align you items in the ListItemIcon like this:
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon sx={{justifyContent: 'right'}}>
{<CloseIcon />}
</ListItemIcon>
</ListItemButton>
</ListItem>
I have a nested data. When I press parent data, I want subdata to appear under it. My code is as below.
<List>
{data1.map((task, index)=>(
<ListItem>
<ListItemButton onClick={() => handleClick(task.name)}>
<ListItemText key={index} primary={task.name}/>
</ListItemButton>
{task.subdata.map((child, i)=>(
<Collapse unmountOnExit in={open === task.name}>
<List>
<ListItemButton >
<ListItemText primary={child.name}/>
</ListItemButton>
</List>
</Collapse>
))}
</ListItem>
))}
</List>
screenshot is as below.
I created my drawer using Materials UI and now I can't create links to other pages.I tried to set the link to https://www.google.com/ also.But it also didn't work.
Below is the part of my code.
<List
component="nav"
aria-labelledby="nested-list-subheader"
className={classes.menu}
>
<ListItem button>
<ListItemText primary="Buses" component={Link} to="/buses" />
</ListItem>
<ListItem button>
<ListItemText primary="Condutors" />
</ListItem>
<ListItem button onClick={handleClick}>
<ListItemText primary="Reports" />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemText primary="Generate Report" />
</ListItem>
<ListItem button className={classes.nested}>
<ListItemText primary="View Report" />
</ListItem>
<ListItem button>
<ListItemText primary="Profle" />
</ListItem>
<ListItem button>
<ListItemText primary="Log Out" />
</ListItem>
</List>
</Collapse>
</List>```
You can use Link for react-router-dom its like a in html
or if Is for page in tour web, you can use useHistory the same module
From react-router-dom documentation:
Provides declarative, accessible navigation around your application.
You can use the normal <a><a/> HTML tag for referring to external links.
I have a code in React where I have two list menus that have nested menus.
class Nav extends React.Component {
state = { open: false };
handleClick = () => {
this.setState({ open: !this.state.open });
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<List
component="nav"
>
<ListItem button onClick={this.handleClick}>
<ListItemText primary="Files" />
{this.state.open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemText primary="Providers" />
</ListItem>
<ListItem button className={classes.nested}>
<ListItemText primary="Insurance Companies" />
</ListItem>
</List>
</Collapse>
<ListItem button onClick={this.handleClick}>
<ListItemText primary="Utilities" />
{this.state.open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemText primary="Excel Templates" />
</ListItem>
<ListItem button className={classes.nested}>
<ListItemText primary="Upload File" />
</ListItem>
</List>
</Collapse>
</List>
</div>
);
}
}
When I click the first menu, the second menu also opens. How do I only open one menu and the other one remains closed?
I think you will need to have two seperate values in state in order to only open one at a time
state = { openMenu1: false, openMenu2: false }
And the click events should trigger only one of those to go to true/false.
Make sure to change the variable in the Collapse component to use the corresponding state as well