How to update Draft Value when click of Save Button?

Question

I have a two Input form and a Paragraph, when I try to change the value of input the paragraph get updated, once the paragraph is updated I am trying to edit the paragraph with the help of drafts library, but once I update the paragraph and save it, it doesn't update the paragraph.

Please anyone Help me out to solve the problem

Codesandbox Link : Code

Context API

import React, { useState, createContext } from "react";

export const Contx = createContext();

export const ConProvider = ({ children }) => {
  const [customerName, setCustomerName] = useState("");
  const [amount, setAmount] = useState("");

  const defaultValue = `<p>Hello ${
    customerName === "" ? "User" : customerName
  },</p>
<p>Please Click on the link below to pay the order - <strong>${amount}</strong> . </p>
<p>Click hear to pay</p>
<br/>
<p>Thanks and Regards</p>
<p>testUser</p>`;
  const [draftValue, setDraftValue] = useState(defaultValue);
  return (
    <Contx.Provider
      value={{
        defaultValue,
        setCustomerName,
        setAmount,
        customerName,
        amount,
        setDraftValue,
        draftValue
      }}
    >
      {children}
    </Contx.Provider>
  );
};

homePage

import React, { useContext, useState } from "react";
import ReactDOM from "react-dom";
import { ConProvider, Contx } from "../ContextApi";
import Data from "./Component/Data/Data";
import NewDraft from "./Component/Data/NewDraft";
import Modal from "./Component/Data/Modal";

import "./styles.css";

function App() {
  const { defaultValue, setDraftValue, draftValue } = useContext(Contx);
  // console.log("defaultValue", defaultValue);
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <div className="App">
      <Data />
      <Modal handleClose={handleClose} show={show}>
        <NewDraft
          prsFunc={setDraftValue}
          handleClose={handleClose}
          defaultValueEmpty={false}
          defaultValue={defaultValue}
        />
      </Modal>

      <div
        className="templateStyle p-2"
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{
          __html: draftValue && draftValue
        }}
      />
      <button onClick={handleShow}>Edit</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ConProvider>
    <App />
  </ConProvider>,
  rootElement
);

Input Form

import React, { useContext } from "react";
import { Contx } from "../../../ContextApi";

export default function Data() {
  const {
    setCustomerName,
    setDraftValue,
    defaultValue,
    setAmount,
    customerName,
    amount
  } = useContext(Contx);
  React.useEffect(() => {
    setDraftValue(defaultValue);
  });
  // console.log("fffffff", customerName, amount);
  return (
    <div>
      <input
        type="text"
        value={customerName}
        name="customerName"
        placeholder="Enter Customer name"
        onChange={(e) => {
          setCustomerName(e.target.value);
        }}
      />
      <input
        type="number"
        placeholder="Enter Amount"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
    </div>
  );
}

DraftJS

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

export default function NewDraft({
  handleClose,
  defaultValue,
  defaultValueEmpty,
  prsFunc
}) {
  const initialState = defaultValueEmpty
    ? () => EditorState.createEmpty()
    : EditorState.createWithContent(
        ContentState.createFromBlockArray(convertFromHTML(defaultValue))
      );
  const [editorState, setEditorState] = useState(initialState);

  const onChange = (value) => {
    setEditorState(value);
  };

  const saveData = () => {
    prsFunc(draftToHtml(convertToRaw(editorState.getCurrentContent())));
    handleClose();
  };

  // console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));

  return (
    <div>
      <div style={{ border: "2px solid", padding: "20px" }}>
        <Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={(value) => onChange(value)}
        />
        <button variant="secondary" onClick={saveData}>
          Save
        </button>
      </div>
    </div>
  );
}

Answer 1

The problem you are facing is caused by this line in Data component. Every time the component is updated, the draftValue is set to the defaultValue.

  React.useEffect(() => {
     setDraftValue(defaultValue);
  });