How to pass props to React Big Calendar custom components?

Question

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

did you try passing component like this? `components={{event: }}` — AlexZvl, Mar 30 '19 at 15:18
@AlexandrZavalii I don't think that works...it will throw a runtime error. I got this working by the following solution. But thanks for looking into it anyway :-) — Yoope, Mar 30 '19 at 23:59

Yoope · Accepted Answer · 2019-05-03T03:24:49.893

OK, I managed to get this working after looking at the here on GitHub

class Parent extends Component {

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

    render() {
        return (
            <BigCalendar
                ...
                events={myEvents}
                components={{
                    event: CustomEventContainer({
                        onPopoverButtonClick: this.popoverButtonClickHandler
                    })
                }}
            />
        );
    }
}

And here's the CustomEventContainer and CustomEvent

const CustomEventContainer = ({ onPopoverButtonClick }) => props => {
    return <CustomEvent event={props} onPopoverButtonClick={onPopoverButtonClick} />;
}

const CustomEvent = React.memo((props) => {

    //...
    return (
        <div>
            <Button content='View' onClick={(e) => props.onPopoverButtonClick(e)} />
        </div>
    );
})

How to pass props to React Big Calendar custom components?

1 Answers1