React: Accessing a class value from outside the class

user_3351108 0
Viewed 29

Very new to React/Javascript here - usually a back end developer.

I have a component class (RichEditorExample) which contains an editor component. I want to be able to access the value of the Editor (EditorState) from outside the class so I can use the value elsewhere. Is there a way I could access the value or pass it back as a function?

code cut down for clarity:

const App = () => {
    class RichEditorExample extends React.Component {

    constructor(props) {
        super(props);

        this.state = { editorState: EditorState.createEmpty() };

        this.onChange = (editorState) => {
            this.setState({ editorState });
        }

.....

         return (
                <div className="RichEditor-root">
                    <BlockStyleControls
                        editorState={editorState}
                        onToggle={this.toggleBlockType}
                    />
                    <InlineStyleControls
                        editorState={editorState}
                        onToggle={this.toggleInlineStyle}
                    />
                    <div className={className} onClick={this.focus}>
                        <Editor
                            editorState={editorState}
                            onChange={this.onChange}
                        />
                    </div>
                </div>
            );

.....
    }

    return (

        <div>
            <RichEditorExample  />
            <some code to access the editor value here>
        </div>
    );
}
reactjs
2 Answers

It's not so simple as it is in other languages, because you don't really instantiate your class Component. You add it to virtual DOM and React mount it and unmount it when needed. So you can't access properties of instance. The solution for that is adding that shared property to global state using libraries like Redux, or more simpler, using Context. It will pass data through the component tree, so data will be available to other components. Or you can just delegate EditorState to parent component and pass it as a props to child components.

user_159490680

I figured it out in the end.

To return the value from the RichTextEditor class, I passed in the set values and a set function as parameters:

const App = ({ content, setContent }) => {

from there I was able to both set the state of the editor in the constructor:

            if (content !== "") {
                this.state.editorState = EditorState.createWithContent(stateFromHTML(content));
            }

and return the value of the editor after:

            this.onChange = (editorState) => {

                this.setState({
                    editorState,
                    editorContentHtml: stateToHTML(editorState.getCurrentContent())
                });
            }

            this.onBlur = (editorState) => {
                this.setState({ editorState });
                setContent(this.state.editorContentHtml);
            }

Which could then be accessed from another component:

    const [content, setContent] = useState("<b>Hello!</b>");

    const setMyContent = (myContent) => {
        setContent(myContent);
    }

    return (
        <div>
            <App content={content} setContent={setMyContent} />
        </div>
    );
user_33511080
Related