hola gente estoy usando material-ui para react y me encuentro en un problemita, en un archivo drawer.js
tengo el siguiente codigo:
export default function SwipeableTemporaryDrawer(props) {
const classes = useStyles();
const [state, setState] = React.useState({
left: false,
});
const toggleDrawer = (open) => (event) => {
if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ ...state, ['left']: open });
};
const list = (anchor) => (
<div
className={classes.list}
role="presentation"
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);
return (
<div>
<React.Fragment >
{props.init === true ? toggleDrawer(true): null}
<SwipeableDrawer
anchor={'left'}
open={state['left']}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
>
{list('left')}
</SwipeableDrawer>
</React.Fragment>
</div>
);
}
el componte funciona de 10, pero quiero manejarlo desde otro archivo, en mi index.js
que es el padre de rawer.js
, tengo un boton y quiero que ese boton sea el manejador se el drawer, me pueden ayudar? por favor
return,
debajo de la etiqueta<React.Fragment />
esta lo que tu dices , yo lo probe a eso que dices pero no se como hacerlo correctamente, lo que hace es siprops.init
es true se ejecutatoggleDrawer(true)
de lo contrario devuelve null, pero esto claramente no me funciona