How to get the html content from react-draft-wysiwyg from the child component to the parent?

Question

I'm trying to get the html content that I've typed in the editor from the editor component (child) to the parent so I can save the form together with the editor's content into my database.

I've tried sending the getContent function into the Editor (child) as a prop and get back the content from the Editor but I keep getting the error showing that getContent is not a function.

What is the correct way to do this so I can get the html content from the Editor to the parent component?

Editor.js (child)

import { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './RichTextEditor.css';

const Editor = (getContent) => {
    const [editorState, setEditorState] = useState(() =>
        EditorState.createEmpty()
    );

    const handleEditorChange = (state) => {
        setEditorState(state);
        sendContent();
    };

    const sendContent = () => {
        getContent(draftToHtml(convertToRaw(editorState.getCurrentContent())));
    };

    return (
        <div>
            <Editor
                editorState={editorState}
                onEditorStateChange={handleEditorChange}
                wrapperClassName="wrapper-class"
                editorClassName="editor-class"
                toolbarClassName="toolbar-class"
            />
            <textarea value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}></textarea>
        </div>
    );
};

export default Editor;

CreateBulletin (parent)

import { useEffect, useState } from 'react'
import { Button, Col, Row } from 'react-bootstrap'
import Editor from '../Editor/Editor'

const AddBulletin = () => {
    const [title, setTitle] = useState ('')
    const [htmlContent, setHtmlContent] = useState('')

    const getContent = (htmlContentProp) => {
        setHtmlContent(htmlContentProp);
        console.log(htmlContentProp);
    }

    const onSubmit = (e) => {
        e.preventDefault();

        if (!title) {
            alert('Please add a title')
            return
        }

        onAdd({ title, htmlContent })

        setTitle('')
        setHtmlContent('')
    }

    return (
        <Row>
            <Col xs={12} md={8}>
                <form className='add-form' onSubmit={ onSubmit}>
                    <div className='form-control bulletin'>
                        <label>Title</label>
                        <input type='text' placeholder='Insert your title here...' style={{width: '100%'}}
                        value={title} onChange={(e) => setTitle(e.target.value)} />
                    </div>
                    <div className='form-control bulletin'>
                        <label>Content</label>
                        <Editor getContent={getContent} />
                    </div>
                    <Button as="input" type="submit" value="Submit" />
                    <Button variant="outline-danger">Cancel</Button>
                </form>
            </Col>
        </Row>
    )
}

export default AddBulletin

Answer 1

A component props is always an object. Whatever props you receive will be a property of props object.

You can use like this

const Editor = (props) => {
... 
   props.getContent(...);
...

or

const Editor = ({getContent}) => {
... 
   getContent(...);
...