How to add buttonclick on PivotItem Header - React

Question

I want to add button click on just the headertext of Pivot list. I have added headerButtonProps but it is not working.

<PivotItem headerText={"abc"} className="def"  headerButtonProps={{onClick: ()=>{  alert("abc123") } }} >
                        <HorizontalStack  className="list">
                            
                        </HorizontalStack>                        
</PivotItem>

Answer 1

Make the function you want in the list jsx file and then pass it to the item component as a prop.

// PivotList.jsx
const handleClick = () => {
    console.log("hi!")
}

return (
    <PivotItem handleClick={handleClick} />
)

// PivotItem.jsx
export const PivotItem = ({handleClick}) => {
    return (
       <Component onClick={handleClick} />
    )
}

I hope you find a solution!