How to pass props to React Big Calendar from custom event?

Question

I need your help. I have a custom event in react big calendar who has a button inside. When I click the button, I want to pass a value to calendar component.

I have no clue how to do that. Can you help me? Thanks!

export const Schedule = (params) => {
 const [value, setValue] = useState(null);
 const onClickHandler = (e) => {
    e.preventDefault();
    setValue("aaa");
  };
return (
  <Calendar
    components={{event.CustomEvent}}
    eventPropGetter={(event) => ({
       style: {
         borderLeft: "5px solid",
         display: "block",
       },
    })}
    events={events}
  />
)
} 

And the EventComponent

const EventComponent = (props) => {
  const BtnChangeValue = () => {
    return (
      <>
        <button onClick = {setValue("this should change value from Calendar")}></button
      </>
    );
  };

 return(
   <>
     <div>aaaaaa</div>
     <BtnChangeValue onClick={????} />
     <div>eeeee</div>
   </>
 )
}

Answer 1

Change your components props to this:

components={{event: () => <CustomEvent onClick={onClickHandler}/>}}

In your EventComponent, pass the props onClick like this:

const EventComponent = (props) => {
  const BtnChangeValue = ({ ...args }) => {
    return (
      <>
        <button {...args}></button
      </>
    );
  };

 return(
   <>
     <div>aaaaaa</div>
     <BtnChangeValue onClick={props.onClick} />
     <div>eeeee</div>
   </>
 )
}