How can I get multiple ckEditor by click on a button in ReactJS using Hooks?

user_15557059 0
Viewed 142

Here is my code:

import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const Followups = () => {
  const [clicked, setClicked] = useState(false);
  const [text, setText] = useState("");
  console.log("START", clicked);

  const buttonClicked = () => {
    setClicked(!clicked);
    // setClicked(false);
  };

  //   const changeState = () => {
  //     setClicked(false);
  //     console.log("State set to false ");
  //   };

  return (
    <>
      {clicked && (
        <CKEditor
          editor={ClassicEditor}
          data={text}
          onChange={(event, editor) => {
            const data = editor.getData();
            setText(data);
        
          }}
          config={{
            toolbar: [
              "heading",
              "|",
              "bold",
              "italic",
              "blockQuote",
              "numberedList",
              "bulletedList",
              "|",
              "undo",
              "redo",
            ],
          }}
        />
      )}
      
      <button onClick={buttonClicked}>Follow-ups</button>
    </>
  );
};
export default Followups;

This is working properly without any error but I am not getting the desired output. Whenever I click the button it shows me another ckEditor but when I press the button for the second time it hides the ckEditor (toggle). but I want that whenever I press the button it shows me another ckEditor. I need help kindly anybody help me out

react-hooks reactjs ckeditor
2 Answers

Followup.jsx File

    import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const Followups = (props) => {
  const [text, setText] = useState("");
  console.log(text);
  return (
    <>
      <CKEditor
        editor={ClassicEditor}
        data={text}
        onChange={(event, editor) => {
          const data = editor.getData();
          setText(data);
          
        }}
        config={{
          toolbar: [
            "heading",
            "|",
            "bold",
            "italic",
            "blockQuote",
            "numberedList",
            "bulletedList",
            "|",
            "undo",
            "redo",
          ],
        }}
      />

      
    </>
  );
};
export default Followups;

App.jsx

    import React, { useState } from "react";

const [clicked, setClicked] = useState([]);
const buttonClicked = (event) => {
    event.preventDefault();
    let newValue = true;
    setClicked((preValue) => [...preValue, newValue]);
   
  };

  return (
    <>
      {clicked.map((data, index) => {
        return <Followups  />;
      })}
      <button className="btn btn-outline-success" onClick={buttonClicked}>
        Follow-ups
      </button>
    </>
  );
user_155570590

If you want another CKEditor component to be added whenever you click on the button, you should use an array to maintain the list of CKEditor components in use. On button click, push the new instance of the component to the array. Return array.map((CKEditorComponent)=>return CKEditorComponent)

user_11096570
Related