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

Answer 1

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