Click actions to display further details in notification

[Vaibhav]

Is it possible to place a click action on a an element passed in the "children" props to show more details when that button or element is clicked ? I am trying it but could not get it to work.

I want to show the message only when the "Know More" is clicked. But when "Know More" is clicked I no action is happening. I placed console.log and checked in handleMessageVisibility

handleMessageVisibility = () => {
    console.log("isShowMessage");
    this.setState({ isShowMessage: true });
  }

  render() {
    const { title, icon, message } = this.props;
    const { isShowMessage } = this.state;
    return (
      <Fragment>

        <div>

          {icon && <i className={icon} />}

          <span style={{ marginLeft: 16 }}>
            {title}
          </span>

          <span
            style={{ textDecoration: 'underline', float: 'right' }}
            onClick={() => this.handleMessageVisibility}
            role="presentation"
          >
            {!isShowMessage && 'Know More'}
          </span>

        </div>

        {
          isShowMessage && (
            <div>
              {message}
            </div>
          )
        }

      </Fragment>
    );
  }