how to pass action into popover body?

[thisroot]

Hi, i try to pass close action into to popover body, but it cant work fo me. Where i get mistake?

togglePopover(toState) {
    const popoverIsOpen =
      typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen;
    this.setState({
      popoverIsOpen,
    });
  }

...
    const popoverProps = {
      isOpen: this.state.popoverIsOpen,
      preferPlace: 'end',
      onOuterAction: e => {
        this.togglePopover(false);
      },
      body: [
        <div key="b" className={cx('popover-body')}>
          <div>
            <ChangeDayForm
              date={date}
              dayName={dayName}
              dayNum={dayNum}
              dayTypeId={dayTypeId}
              dayTypeName={dayTypeName}
              dayStart={dayStart}
              dayStop={dayStop}
              onCloseCard={e => this.togglePopover(false)}
            />
          </div>
        </div>,
      ],
    };

class ChangeDayForm extends Component {
  constructor(props) {
    super(props);
  }

  render() {
 
   ...
    return (
   ....
              <Button onClick={this.props.onCloseCard}>Отмена</Button>
    );
  }
}

[jhardin293]

Same problem over here.
Tried passing markup to body prop using string and array syntax but still cant register actions/events.

[valentinvoilean]

Create an external component, then render it inside the popoverProps.body.

const Test = () => (
    <div key="b" onClick={() => console.log('works')}>
      Popover contents
    </div>
);

....

const popoverProps = {
    ...
    body: <Test />,
  };