-------- APP Page --------------- import React, { useState } from "react"; import Header from "./Header"; import Footer from "./Footer"; import Note from "./Note"; import CreateArea from "./CreateArea"; function App() { ------------ see ------------- const [notes, setNotes] = useState([]); function addNote(newNote) { setNotes((prevValue) => { return [...prevValue, newNote]; }); } ------------ end see -------------- function onDelete(id) { setNotes((prevValue) => { return prevValue.filter((item, index) => { return index !== id; }); }); } return ( <div> <Header /> <CreateArea addNote={addNote} /> {notes.map((noteItem, index) => { return ( <Note key={index} id={index} title={noteItem.title} content={noteItem.content} deleteFunction={onDelete} /> ); })} <Footer /> </div> ); } export default App; ----------------- content area page ------------ import React, { useState } from "react"; import AddToPhotosIcon from "@material-ui/icons/AddToPhotos"; import Fab from "@material-ui/core/Fab"; import Zoom from "@material-ui/core/Zoom"; function CreateArea(params) { ------------ see -------------- const [input, setInput] = useState({ title: "", content: "" }); function handleInput(event) { const { name, value } = event.target; setInput((prevValue) => { return { ...prevValue, [name]: value }; }); } function SubmitButton(event) { event.preventDefault(); params.addNote(input); setInput({ title: "", content: "" }); } ------------ end see -------------- const [condition_check, setCondition_check] = useState(false); function onCondition() { setCondition_check(true); } function noCondition() { setCondition_check(false); } return ( <div> <form className="create-note" onBlur={noCondition}> {condition_check && ( <input name="title" placeholder="Title" value={input.title} onChange={handleInput} /> )} <textarea name="content" placeholder="Take a note..." rows={condition_check ? 3 : 1} value={input.content} onChange={handleInput} onClick={onCondition} /> ------------ see -------------- <Zoom in={condition_check}> <Fab onClick={SubmitButton}> <AddToPhotosIcon /> </Fab> </Zoom> ------------ end see -------------- </form> </div> ); } export default CreateArea;