Unable to use onClick action on pivot item not working

user_9662700 0
Viewed 871

I am expecting to render different component's based upon flag value and components need to be rendor outside the pivotitem tag. 

class App extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            isflag: true
        };
    }

    render() {
        return (
            <div>           
                    <Pivot aria-label="Basic Pivot Example">
                        <PivotItem headerText={this.state.NumberofSupportRequests}  onClick={() => this.setState({ isflag: true })} >
                        </PivotItem>
                        <PivotItem headerText={this.state.MeanTimetoResolution} onClick={() => this.setState({ isflag: false })}>
                        </PivotItem>
                    </Pivot>                        

                    <div className="ms-Grid-row">
                        {this.state.isflag ? <component1 /> : <component2 />}
                    </div>

            </div>
        );
    }
}
export default App;
pivotitem reactjs frontend
1 Answers
class App extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            isflag: true
        };
    }

    render() {
        return (
            <div>           
                    <Pivot aria-label="Pivot tabs for the charts"
                                selectedKey={this.state.isbarchart}
                                onLinkClick={() => { 
                                    if (this.state.isbarchart) {
                                        this.setState({ isbarchart: false });
                                    } else {
                                        this.setState({ isbarchart: true });
                                    }
                                }}
                                headersOnly={true}>
                        <PivotItem headerText={this.state.NumberofSupportRequests}  onClick={() => this.setState({ isflag: true })} >
                        </PivotItem>
                        <PivotItem headerText={this.state.MeanTimetoResolution} onClick={() => this.setState({ isflag: false })}>
                        </PivotItem>
                    </Pivot>                        

                    <div className="ms-Grid-row">
                        {this.state.isflag ? <component1 /> : <component2 />}
                    </div>

            </div>
        );
    }
}
export default App;
user_96627000
Related