Can I trigger a onclick event in a function component which updates the state of a class component?

  drop-down-menu, javascript, reactjs, setstate

I am trying to create some Navbar dropdown buttons, I have dynamically added the buttons and I am trying to add the onclick event which just toggles the selected button/item/Object in Section array from state through setState.
I have tried almost everything I could look up from internet and the errors keep popping.
If anyone could suggest a solution, that would be a big help.
Cheers

import React, { Component } from 'react'
var Introbar_=class IntroBar extends Component {
  
    constructor(props) {
        super(props);      
        this.state = { Sections:[{name:'Subject',open:false},{name:'Partner',open:false},{name:'Program',open:false},{name:'Level',open:false},{name:'Availability',open:false},{name:'Language',open:false}]}   
 
    
    OnbuttonClick=(item)=>{
        console.log(item.name+" "+item.open) /*item name and isopen shows to be undefined in console*/
        this.changeState(item.open);
        console.log(item.open);
        
    }
    render() { 
        return ( 
            <div className="Intro-Container">
                <DisplaySections param={this.state.Sections}/>
               
            </div>
         );
    }
}

/*Functional components*/

function DisplaySections(params)
{
    let arr=params.param;
    return(
        <div className="Section-options">
           { arr.map((item)=>(Section(item)))}
        </div>
    );
}
function Section(item)
{
    let arj=item;
    return(
    <button className="Section" onClick={window.global.OnbuttonClick(item)}>
        {item.name}
        {console.log(item.name + "Before click " +item.open)}
        {item.open && (AddDropDownItem(item.name))}
    </button>
    );
}

Source: Ask Javascript Questions

LEAVE A COMMENT