Enumerate in onClick attribute an array of functions stored in state

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.

%d bloggers like this: