Hello I have a React app that has a menu.
The state has 2 arrays one with the names of the menu items as string which i managed to render with the map function and I would like to enumerate for each menu item on the onClick attribute a function from the array of functions that I have in my state.
This is the code:
class MeniuPF extends Component {
constructor(props) {
super(props);
this.state = {
collapseID: '',
lista:[
'Adeverinta venit','Bilant anual','Bilant semestrial',
],
listafunctii:[
this.toggleAdeverintaVenit,
this.toggleBilantAnual,
this.toggleBilantSemestrial,
],
listaMesaje:false,
bilantAnual:false,
bilantSemestrial:false,
};
this.toggleListaMesaje = this.toggleListaMesaje.bind(this);
this.toggleBilantAnual = this.toggleBilantAnual.bind(this);
this.toggleBilantSemestrial = this.toggleBilantSemestrial.bind(this);
}
toggleCollapse = collapseID => () => {
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ''
}));
};
toggleBilantAnual() {
this.setState({bilantAnual:!this.state.bilantAnual})
this.setState({bilantSemestrial:false})
this.setState({adeverintaVenit:false})
this.setState(prevState => ({
collapseID: prevState.collapseID !== this.state.collapseID ? this.state.collapseID : ''
}));
}
toggleBilantSemestrial() {
this.setState({bilantAnual:false})
this.setState({bilantSemestrial:!this.state.bilantSemestrial})
this.setState({adeverintaVenit:false})
this.setState(prevState => ({
collapseID: prevState.collapseID !== this.state.collapseID ? this.state.collapseID : ''
}));
}
toggleAdeverintaVenit() {
this.setState({bilantAnual:false})
this.setState({bilantSemestrial:false})
this.setState({adeverintaVenit:!this.state.adeverintaVenit})
this.setState(prevState => ({
collapseID: prevState.collapseID !== this.state.collapseID ? this.state.collapseID : ''
}));
}
check() {
this.state.listafunctii.map((list) =>
console.log(this.state.listafunctii[0])
)
};
render() {
return (
<div>
<Router>
<MDBContainer>
<MDBNavbar
color='light-blue lighten-4'
style={{ marginTop: '20px' }}
light
>
<MDBContainer>
<MDBNavbarBrand>Declaratii persoane juridice</MDBNavbarBrand>
<MDBNavbarToggler
onClick={this.toggleCollapse('navbarCollapse1')}
/>
<MDBCollapse
id='navbarCollapse1'
isOpen={this.state.collapseID}
navbar
>
<MDBNavbarNav left>
<MDBNavItem >
{this.state.lista.map((list,i) =>
<MDBNavLink to='#!' onClick={this.state.listafunctii[i}>{list}</MDBNavLink>
)}
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
</MDBContainer>
</Router>
<br></br>
{this.state.listaMesaje ? <ListaMesaje/>:null}
{this.state.bilantAnual ? <BilantAnual/>:null}
{this.state.bilantSemestrial ? <BilantSemestrial/>:null}
</div>
);
}
}
export default MeniuPF;
I have at onClick attribute this.state.listafunctii[0] because I thought it would enumerate the functions that I have written in the state array but I have checked what is returning with the check method and in the console it shows me the whole function. When I click a menu item it gives me this error:
TypeError: Cannot read property 'setState' of undefined
So it calls the function but it gives me this error...and when I console.log the map of the array it return me what is contained in the function. I would like to enumerate only the function call eg: this.toggleAdeverintaVenit only this to show in the onClick attribute.
Thanks in advance
Read more here: https://stackoverflow.com/questions/66276763/enumerate-in-onclick-attribute-an-array-of-functions-stored-in-state
Content Attribution
This content was originally published by SerCio at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.