score:1

Accepted answer
import { useState } from "react";
import "./styles.css";

const Main_Part = ({ newList }) => {
  return <div className="main">{newList && newList.map((v, i) => v.task)}</div>;
};
const Header = () => {
  let [modalActive, setModalActive] = useState(false);
  let [newList, setNewList] = useState([]);
  let [input, setInput] = useState("");

  let addList = (myInput) => {
    let newDiscussion = {
      id: Math.random(),
      task: myInput
    };
    setNewList([...newList, newDiscussion]);
  };

  let handleInput = (e) => {
    setInput(e.target.value);
  };

  let submitTask = (e) => {
    e.preventDefault();
    addList(input);
    setInput("");
  };

  return (
    <header className="header">
      <form onSubmit={submitTask}>
        <input type="text" placeholder="Створити" onChange={handleInput} />
        <button type="submit" onSubmit={submitTask}>
          Create
        </button>
      </form>
      <button onClick={() => setModalActive(false)}>Закрити</button>
      <Main_Part newList={newList} />
    </header>
  );
};

export default function App() {
  return (
    <>
      <Header />
      <Main_Part />
    </>
  );
}

Related Query

More Query from same tag