Paasing data from a child class component to a parent functional component in react

Question

I am trying to pass data from a class-based component to a functional-based component in react.

The class component is a react quill editor where I am trying to get the data typed in the editor (editorHtml) and pass the data to the functional component.

Below is the code in the class-based component

const CustomHeart = () => <span>♥</span>;
function insertHeart() {

  console.log(this)
  const Quilly = this.quill
  const input = document.createElement("input");
  input.setAttribute("type", "file");
  input.click();


  input.onchange = function(){
    const cursorPosition = Quilly.getSelection().index;
    Quilly.insertText(cursorPosition, "♥");
  Quilly.insertEmbed(cursorPosition,"image","https://cdn.pixabay.com/photo/2022/01/05/22/31/woman-6918210_960_720.jpg");
    Quilly.setSelection(cursorPosition + 1);
  }
 
}

class Editor extends React.Component {
state = { editorHtml: "" };
handleChange = html => {
    this.setState({ editorHtml: html });
  };
static modules = {
    toolbar: {
      container: "#toolbar",
      handlers: {
        insertHeart: insertHeart
      }
    }
  };

  static formats = [
    "header",
    "font",
    "size",
    "bold"]

}

 render() {
    return (
      <div className="text-editor">
        <CustomToolbar />
        <ReactQuill
          value={this.state.editorHtml}
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          modules={Editor.modules}
          formats={Editor.formats}
        />
      </div>
    );
  }
export default Editor

For the functional-based component

I am trying to pass the value of editorHtml to the functional component below

function SendEmail() {
return (
<Editor >
)
}

I know I can create both as functional component and use props in passing the data around but due to the use of this keyword in the insertHeart in the class component above... I couldn't use a functional approach

Answer 1

You should manage the state of editorHTML at the parent component and pass it down to Editor .

<Editor handleChange={this.handleChange} editorHtml={this.state.editorHTML} />

and access it through the props in Editor:

    <ReactQuill
      value={this.props.editorHtml}
      onChange={this.props.handleChange}
      placeholder={this.props.placeholder}
      modules={Editor.modules}
      formats={Editor.formats}
    />

Answer 2

After going around for a while I was able to get the solution by using the this.props method to access the setHtml method in the class component.This setHtml method takes in a string...and I passed the value that I was getting from the editor to the setHtml method.... see below for the code to solve the problem....

class Editor extends React.Component {
  state = { editorHtml: "" };
  handleChange = (html) => {
    this.setState({ editorHtml: html });
    this.props.setHtml(html);
  };


}

In the function component, i set the state of the setHtml and also pass the value of the value in the Html

function SendEmail() {

const [html, setHtml] = useState("");


{console.log(html)}//This would give you the value typed in your editor
<Editor setHtml = {setHtml} />


}