React To Print not triggered when custom button is clicked

Viewed 30

I have the following code to use React To print, a library to print a component:

    <ReactToPrint
        trigger={() => 
            <SqIconButton action={(e)=>e} color={"success"}>
                <AiIcons.AiFillPrinter style={{color: 'black',fontSize:'1rem'}}/>
            </SqIconButton>
        }
        content={() => componentRef.current}
/>

And my custom Button SqIconButton reads as follows:

export default function SqIconButton({children,color="primary",fontColor="#000000",action,tip="",disableElevation=false,sxstyle={},classes}){
    return(
        <Tooltip title={tip}>
            <Button 
            color={color} 
            variant="contained" 
            onClick={action} 
            disableRipple={disableElevation}
            className={`TBButton ${classes}`}
            sx={sxstyle}
            >
                {children}
            </Button>
        </Tooltip>      
    )
}

In the examples of React To Print code for its trigger nothing is referencing "onclick" property on buttons, examples mostly look like this: <button>print this</button> and if I use this element it actually works. But my custom button does not work as is, so I think I have to pass the onclick event over my action custom property, so I'm trying with action={(e)=>e}, but the button does nothing when I press it.

Documentation says about trigger: A function that returns a React Component or Element. Note: under the hood, we inject a custom onClick prop into the returned Component/Element. As such, do not provide an onClick prop to the root node returned by trigger, as it will be overwritten So I don't know if onclick will be overwritten how could I pass this event to a child button component.

0 Answers
Related