I'm facing an issue where I want the state of my component to change when I click on a MenuItem. Here's how I'm trying to achieve it:
export default class MenuAlumno extends React.Component {
constructor() {
super();
this.state = {
drawerOpen:false,
currentPage: 'Inicio'
}
};
currentPages = (currentPage) => {
this.setState({
currentPage: currentPage
});
}
render() {
return (
<div>
<Drawer
docked = {false}
width = {200}
open = {this.state.drawerOpen}
onRequestChange = {(drawerOpen) => this.setState({drawerOpen})}
>
<MenuItem primaryText = "Inicio" onTouchTap = {this.currentPages('Inicio')} containerElement = {<Link to="/administrador/inicio"/>}/>
<MenuItem primaryText = "Nueva Incidencia" onTouchTap = {this.currentPages('Nueva Incidencia')} containerElement = {<Link to="/administrador/nueva_incidencia"/>}/>
<MenuItem primaryText = "Incidencias Recibidas" onTouchTap = {this.currentPages('Incidencias Recibidas')} containerElement = {<Link to="/administrador/incidencias_recibidas"/>}/>
<MenuItem primaryText = "Informes" onTouchTap = {this.currentPages('Informes')} containerElement = {<Link to="/administrador/informes"/>}/>
</Drawer>
</div>
);
}
However, I'm encountering the following error:
Warning: setState(...): Cannot update during an existing state transition (such as within 'render' or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to 'componentWillMount'.Any suggestions on how to resolve this issue? Appreciate any help.
EDIT: ----
If I do this: (adding ()=> begin the call function)
<MenuItem primaryText = "Inicio" onTouchTap = {() => this.currentPages('Inicio')} containerElement = {<Link to="/administrador/inicio"/>}/>
<MenuItem primaryText = "Nueva Incidencia" onTouchTap = {() => this.currentPages('Nueva Incidencia')} containerElement = {<Link to="/administrador/nueva_incidencia"/>}/>
<MenuItem primaryText = "Incidencias Recibidas" onTouchTap = {() => this.currentPages('Incidencias Recibidas')} containerElement = {<Link to="/administrador/incidencias_recibidas"/>}/>
<MenuItem primaryText = "Informes" onTouchTap = {() => this.currentPages('Informes')} containerElement = {<Link to="/administrador/informes"/>}/>
Although no errors occur, the functionality does not work as expected. The state is not updated when clicking on a MenuItem. Instead, it remains at 'Inicio', and only changes after clicking twice on the same option. Could this be related to Linking to other routes causing re-rendering of the menu component? Any solutions?
Thank you for your assistance.