I can't seem to get react to pass down these methods to my component

Question

I'm building a textbox that pops up on selection and have it set up so the box pops up when I want it to. What happens is the Tooltip component shows up in the toolbar with two buttons, but the buttons don't do anything. The two methods I'm sending down into that Tooltip component don't seem to be doing anything.

When I check in devtools it looks like the Tooltip component is rendering outside of the Main component which would possibly explain this.

Is there a way I can fix this to get the functionality I need?

Main component:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTooltip from 'react-tooltip';
import Tooltip from './Tooltip.jsx';
import Editor from 'react-medium-editor';

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: ''}
  }

  render() {
    return (
      <div className = "container" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
        <h1 className = "headLine" >Medium Markup</h1>
          <p className='editable'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id felis vel sem tristique efficitur. Nunc neque purus, tempor eget urna eu, porttitor congue nulla. Morbi vitae lectus sollicitudin, congue dolor ac, ornare ex. Aenean molestie rutrum mauris, vel ultricies erat pellentesque eget. Nunc at nisi id turpis lobortis ultrices ac eget mi. Cras ac facilisis leo. Vestibulum a enim eget ex tempor pretium. Nunc dignissim bibendum molestie. Fusce imperdiet imperdiet tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec gravida massa. Fusce tristique, nulla vitae porttitor venenatis, mi sem fermentum metus, sit amet auctor mi nisl nec erat.</p>
      </div>
    );
  }

  captureSelection() {
    var selectedText = '';

    if(window.getSelection()){
      selectedText = window.getSelection();
    } else if (document.getSelection()) {
      selectedText = document.getSelection()
    } else if (document.selection) {
      selectedText = document.selection.createRange().text;
    }
    console.log('this is selectedtext: ', selectedText)
    this.setState({text: selectedText.toString()})
    if(selectedText.toString() !== ''){
      this.toolBox();
    }
    
  }

  highLightText(e) {
    console.log('highlight this!');
  }

  commentText(e) {
    console.log('comment this!');
  }

  toolBox() {
    var selection = window.getSelection()
    var range = selection.getRangeAt(0);
    var rect = range.getBoundingClientRect();
    var div = document.createElement('div');   // make box
    div.style.top = (rect.top + -75) + 'px';
    div.style.left= (rect.left) + 'px';
    div.style.height = 50 + 'px';
    div.style.width = rect.width + 'px';
    div.className = 'toolTip';
    ReactDOM.render(
      <Tooltip highli={this.highLightText} commentT={this.commentText} />,
      document.body.appendChild(div),
    )
    document.body.appendChild(div);
  }
  
  removetoolBox() {
    var elements = document.getElementsByClassName('toolTip');
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
  }
}

export default Main;

Tooltip component:

import React from 'react'


class Tooltip extends React.Component {
  constructor(props){
    super(props);
  }

  render () {
    return (
      <div className="container">

        <button onClick={this.highl} className="buttons">Highlight</button>
        <button onClick={this.commentT} className="buttons">Comment</button>
      </div>
    )
  }
}

export default Tooltip;

Answer 1

1) In your call to Tooltip from Main you should bind the class methods like you did in your previous code:

<Tooltip highli={this.highLightText.bind(this)} commentT={this.commentText.bind(this)} />,

(Really you should set these up in the constructor for the sake of performance. For example:

constructor(props) {
  super(props);
  this.this.highLightText = this.highLightText.bind(this);
  ...
}

Then you don't have to keep rebinding the method in render.)

2) In your actual Tooltip component, use this.props:

<button onClick={this.props.highl} className="buttons">Highlight</button>
<button onClick={this.props.commentT} className="buttons">Comment</button>

Answer 2

The props that you pass to a Tooltip component are accessible under this.props, not under this.

This code should work:

import React from 'react'


class Tooltip extends React.Component {
  constructor(props){
    super(props);
  }

  render () {
    return (
      <div className="container">

        <button onClick={this.props.highl} className="buttons">Highlight</button>
        <button onClick={this.props.commentT} className="buttons">Comment</button>
      </div>
    )
  }
}

export default Tooltip;