share value from one component into another in reactjs

Question

I have used "React Draft Wysiwyg" for this. Here in the code below I want to access the value of the variable value editor.js file in the desktop.js file. how can I do that?

editor.js:



export default class TextEditor extends Component {
render(){
  return(){
        <textarea
          disabled
         value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        ></textarea>
    
      
    );
  }
}

desktop.js:

export const Desktop = () => {

    return (
      
        <div className="splitScreen">
            <TextEditor/>

        </div>
}

You don't, directly. You can `useEffect` to call a method prop passed to ``, or you lift the editor state up a level, or... There are many ways it *could* be done, really. — Dave Newton, Jul 28 '21 at 18:41
It's not clear from you question hot this two components relates to each other. — ishaba, Jul 28 '21 at 18:44
https://stackoverflow.com/questions/27864951/how-to-access-a-childs-state-in-react This should solve you problem — Shubham Kumar, Jul 28 '21 at 18:45

score 0 · Answer 1 · answered Jul 28 '21 at 18:48

0

First you need to pass a function as a props in TextEditor from Desktop component.

Like this <TextEditor onChange={this.onChange}>.

Declare a method in Desktop component as follows

onChange = (value) => {
  console.log(value);
}

Now call this method in TextEditor component in onEditorStateChange method like this

 onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });
    this.props.onChange(draftToHtml(convertToRaw(editorState.getCurrentContent()));
  };

answered Jul 28 '21 at 18:48

Kishan Patel

11
3

I am getting the error "onchange is undefined" in TextEditor.js file – Johnst33 Jul 28 '21 at 19:20
Have you passed it in TextEditor props when you used it in Desktop? – Kishan Patel Jul 28 '21 at 19:23
Like this `````` – Kishan Patel Jul 28 '21 at 19:25
Yes I did pass this : in desktop.js file but its still showing this error – Johnst33 Jul 28 '21 at 19:29

score 0 · Accepted Answer · answered Jul 28 '21 at 18:53

I suggest using useState in desktop.js, while passing the state of textValue and the setState function as props to TextEditor component:

import React, { useState } from "react";

export const Desktop = () => {
  const [textValue, setTextValue] = useState("");

  return (
    <div className="splitScreen">
      <TextEditor textValue={textValue} setTextValue={setTextValue} />
    </div>
  );
};

And then using the two props inside TextEditor:

import React, { Component } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";
import "./editor.css";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";

export default class TextEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;

    // here you set the textValue state for the parent component
    this.props.setTextValue(
      draftToHtml(convertToRaw(editorState.getCurrentContent()))
    );

    return (
      <div className="editor">
        <Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={this.onEditorStateChange}
        />
        <textarea
          disabled
          text_value={this.props.textValue} // here you use the textValue state passed as prop from the parent component
        ></textarea>
      </div>
    );
  }
}

I am getting this error: " TypeError: this.props.setTextValue is not a function " — Johnst33, Jul 28 '21 at 19:15
@Johnst33 Hi, did you add the two props I displayed in the desktop.js file? `` — Kevin Haxhi, Jul 28 '21 at 19:21
@Johnst33 Make sure you always use `textValue` as `this.props.textValue` inside the `TextEditor` component (e.g. `
{this.props.textValue}
`), since it is taken from the props passed to it from the parent component (Desktop). Also, if this was the correct answer for your question, please mark it as correct. — Kevin Haxhi, Jul 28 '21 at 19:34

share value from one component into another in reactjs

2 Answers2