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

Question

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

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) — Hariom Balhara
– Hariom Balhara, Commented Sep 8, 2021 at 5:37
Thanks a lot Hariom Balhara for your quick response. I try your logic and its working now! — Abdul Sammad
– Abdul Sammad, Commented Sep 8, 2021 at 10:30
Cool. I have posted it as the answer. Can you please accept the answer. — Hariom Balhara
– Hariom Balhara, Commented Sep 8, 2021 at 12:47

Abdul Sammad · Accepted Answer · 2021-09-08 13:55:39Z

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>
    </>
  );

Hariom Balhara · Accepted Answer · 2021-09-08 12:46:34Z

0

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)

answered Sep 8, 2021 at 12:46

Hariom Balhara

9129 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related