Unable to use onClick action on pivot item not working

Question

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;

Answer 1

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;

Answer 2

See this example to get onLinkClick to work on Pivot but not Pivot Item.

Also, docs

  const handleLinkClick = (item?: PivotItem) => {
    if (item) {
      setSelectedKey(item.props.itemKey!);
    }
  };

      <Pivot
        aria-label="Separately Rendered Content Pivot Example"
        selectedKey={selectedKey}
        // eslint-disable-next-line react/jsx-no-bind
        onLinkClick={handleLinkClick}
        headersOnly={true}
        getTabId={getTabId}
      >
        <PivotItem headerText="Rectangle red" itemKey="rectangleRed" />
        <PivotItem headerText="Square red" itemKey="squareRed" />
        <PivotItem headerText="Rectangle green" itemKey="rectangleGreen" />
      </Pivot>