This is my TextEditor.js. I am willing to use it wherever I want it but when I use this component I am wishing to get the value associated with it every time it's state gets change.

import React, { Component } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";

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;
        console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));

//I want to get draftToHtml(convertToRaw(editorState.getCurrentContent())) whenever I call this component

        return (
            <div>
                <Editor
                    editorState={editorState}
                    toolbarClassName="toolbarClassName"
                    wrapperClassName="wrapperClassName"
                    editorClassName="editorClassName"
                    onEditorStateChange={this.onEditorStateChange}
                />
     
            </div>
        );
    }
}

I want to use it in below component. I want to use it so that I can get the value whenever its state get changed and I can save the data.

import React, {useState} from 'react';
import axios from "axios"

import ReactDOM from 'react-dom';
import {Editor, EditorState,RichUtils} from 'draft-js';
import 'draft-js/dist/Draft.css';
import TextEditor from '../TextEditor';

function AddBlog() {
    

  return <div>
      <h3 className='text-center my-3'>
            Add blog
      </h3><hr/>
      <div className='col-lg-6 mx-auto'>
      <form>
 
  <div class="mb-3 border p-2 rounded-3">
    <label for="exampleInputPas1" class="form-label">Description</label>
    <input type="text" hidden  value={desc} onChange={(e)=>setDesc(e.target.value)} class="form-control" id="exampleInputrd1" />
    <div className="editor">

        <TextEditor  />
//I want the value from TextEditor so that I can save it.
      </div>
 
  </div>
  
  <div className='d-flex justify-content-end'>

  <button type="submit" onClick={submitForm} class="btn btn-danger btn-sm">Add</button>
  </div>
</form>

      </div>

  </div>;
}

export default AddBlog;

So how can I get the value form TextEditor.js to AddBlog.js so that I can save it.

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T13:23:08.091Z

There are two solutions

use redux
create another file which stores the text, the functionallity would be something like when the user clicks save, the text is saved into the other file and you can reference it in AddBlog.js

Answer 2 · 2022-07-04T13:23:08.100Z

Lift the editorState state up to the AddBlog component.
Pass a onEditorStateChange callback from AddBlog to TextEditor and it will set the editor state in AddBlog on edit.

TextEditor

export default class TextEditor extends Component {
 
  render() {
    console.log(draftToHtml(convertToRaw(this.props.editorState.getCurrentContent())));

    return (
      <div>
        <Editor
          editorState={this.props.editorState}
          onEditorStateChange={this.props.onEditorStateChange}
        />
      </div>
    );
  }
}

AddBlog

import {useState} from 'react'
import { EditorState } from "draft-js";

function AddBlog() {
  const [editorState,setEditorState] = useState(EditorState.createEmpty())

  const onEditorStateChange = (editorState) => {
    setEditorState(editorState)
  }

  return (
    <div>
      <TextEditor onEditorStateChange={onEditorStateChange} editorState={editorState}/>
    </div>
  );
}

0

90

How can I get the value from a component to another?

This is my TextEditor.js. I am willing to use it wherever I want it but when I use this component I am wishing to get the value associated with it every time it's state gets change.

I want to use it in below component. I want to use it so that I can get the value whenever its state get changed and I can save the data.

So how can I get the value form TextEditor.js to AddBlog.js so that I can save it.

2 answers

0

0

Find remote jobs

Andres GPT