javascript - 在按钮上单击显示反应表(on button click display react table)

Question

I have one react table with subcomponent, in subcomponent, I am having 2 buttons on click of each button need to show react table, please help me with this.

(我有一个带有子组件的反应表，在子组件中，每个按钮的单击上我有2个按钮需要显示反应表，请对此提供帮助。)

ex:
class Sample extends React{
firstFun=()=>{
return <ReactTable data={} columns={columns}
}
secondFun=()=>{
return <Reacttable data={} columns={columns}
}
subcompo=()=>{
// some code
<bt1 onclick={this.firstFun}/>
<bt2 onclick={this.secondFun}/>
}
render(){
return(
<ReactTable
data={}
submcomponent={this.subcompo}
/>
)}
}

  ask by Shruti Biradar translate from so

Answer 1

You can set in state which button is clicked and active with boolean value and display different tables.

(您可以设置其状态为boolean并单击并激活哪个按钮，并显示不同的表。)

Is something like this similar to what you are looking for:

(类似于以下内容：)

class Sample extends React {
    state = {
        firstButtonActive: false,
        secondButtonActive: false
    }
    handleFirstButtonClick = () => {
        this.setState({ firstButtonActive: !this.state.firstButtonActive})
    }
    handleSecondButtonClick = () => {
        this.setState({ secondButtonActive: !this.state.secondButtonActive })
    }
    subcompo = () => {
        // some code
        <bt1 onclick={this.handleFirstButtonClick} />
        <bt2 onclick={this.handleSecondButtonClick} />
    } 

    render() {
        const { firstButtonActive, secondButtonActive } = this.state;
        return (
            <>
                <ReactTable
                    data={}
                    submcomponent={this.subcompo}
                />

                {firstButtonActive && <ReactTable data={} columns={columns}/>}

                {secondButtonActive && <ReactTable data={} columns={columns} />}
            </>
        )
    }
}