Project/projectreact/src/components/snippet.js

import { useState } from "react";
import Editor from "./editor";
import { actionSnippetAdd } from "../actions";
import { connect } from "react-redux";

const SnippetHome = ({onSave}) => {
  const [files, setFiles] = useState([
    { type: "html" },
    { type: "css"},
    { type: "javascript" },
  ]);
  const [name, setName] = useState("");
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  return (
    <div>
      {files.map((data, index) => (
        <>
          <Editor
            onDelete={() => setFiles(files.filter((item) => item != data))}
            data={data}
            onChange={({ type, name, text }) =>
              setFiles([
                ...files.slice(0, index),
                { type, name, text },
                ...files.slice(index + 1),
              ])
            }
          />
        </>
      ))}
      <br />
      <div
        style={{
          alignItems: "center",
          textAlign: "center",
          marginBottom: "10px",
        }}
      >
        <div>
          <button
            className="btn btn-primary"
            onClick={() => setFiles([...files, { type: "html" }])}
            key={files}
          >
            Add editor
          </button>
        </div>
        <div className="input-group mb-3 mt-5 ml-auto mr-auto w-25">
          <div className="input-group-prepend">
            <span className="input-group-text" id="basic-addon1">
              Name of your project
            </span>
          </div>
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            type="text"
            className="form-control"
            placeholder="Name of project"
            aria-label="Name of project"
            aria-describedby="basic-addon1"
          />
        </div>
        <div className="input-group ml-auto mr-auto w-50">
          <div className="input-group-prepend">
            <span className="input-group-text ">Description</span>
          </div>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="form-control "
            aria-label="With textarea"
            placeholder="Your description"
          ></textarea>
        </div>
        <button className="btn btn-success float-right mr-5 mb-5" onClick = {() => onSave(title , description , files)}>
          Save project
        </button>
      </div>
    </div>
  );
};

const ConnectedSnippetHome = connect(null,{ onSave: actionSnippetAdd })(SnippetHome);
export default ConnectedSnippetHome