How to pass props to React Big Calendar custom components?

manpreet Best Answer 3 years ago

I'm using React Big Calendar with custom event components.

In my custom component, I need to display a few buttons which a user can click (via popover). I got the popup thing working fine, but I also want the class that renders BigCalendar to get notified when a button in the popover is clicked. How do we pass an "onButtonClick" event to my custom component as props? Here's a simplified version of my code

class Parent extends Component {

    popoverButtonClickHandler = (e) => {
        //handle button click
    }

    render() {
        return (
            <BigCalendar
                ...
                events={myEvents}
                components={{
                    event: CustomEvent
                }}
            />
        );
    }
}

And here's my CustomEvent class

class CustomEvent extends Component {
    render() {
        return (
            <div>
                <p>My event title: {this.props.title}p>
                <MyPopover>
                    <Button onClick={this.props.onPopoverButtonClick}>
                MyPopover>
            div>
        )
    }
}

I'm trying to figure out how I can pass

onPopoverButtonClick={this.popoverButtonClickHandler}

to my CustomEvent so that Parent will be notified when the button is clicked.

Any ideas how I can achieve this? Thanks