Update Notes in react js

import React, { useState } from "react";
// import Header from "./Header";
// import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

function App() {
  const [notes, setNotes] = useState([]);

  function addNote(newNote) {
    setNotes((prevNotes) => {
      return [...prevNotes, newNote];
    });
  }
  function editNote(id,title,content){
    const tobeUpdated = notes.find(singleNote => singleNote.id === id)
    tobeUpdated.id = id
    tobeUpdated.title = title;
    tobeUpdated.content = content;
    setNotes([...notes])

    
  }
  function deleteNote(id) {
    setNotes((prevNotes) => {
      return prevNotes.filter((noteItem) => {
        return noteItem.id !== id;
      });
    });
  }
  console.log(notes);
  return (
    <div>
      <CreateArea onAdd={addNote} />
      {notes.map((noteItem) => {
        return (
          <Note
            key={noteItem.id}
            id={noteItem.id}
            title={noteItem.title}
            content={noteItem.content}
            onDelete={deleteNote}
            onEdit={editNote}
          />
        );
      })}
    </div>
  );
}

export default App;



import React, { useState } from "react";
// //import AddIcon from "@material-ui/icons/Add";
// import Fab from "@material-ui/core/Fab";
// import Zoom from "@material-ui/core/Zoom";

function CreateArea(props) {
  const [isExpanded, setExpanded] = useState(false);

  const [note, setNote] = useState({
    id: "",
    title: "",
    content: ""
  });

  function handleChange(event) {
    const { name, value } = event.target;

    setNote((prevNote) => {
      return {
        ...prevNote,
        [name]: value
      };
    });
  }

  function submitNote(event) {
    event.preventDefault();
    setNote({
      id: Math.floor(Math.random() * 100),
      title: "",
      content: ""
    });
    props.onAdd(note);
  }

  function expand() {
    setExpanded(true);
  }

  return (
    <div>
      <form className="create-note">
        {isExpanded && (
          <input
            name="title"
            onChange={handleChange}
            value={note.title}
            placeholder="Title"
          />
        )}

        <textarea
          name="content"
          onClick={expand}
          onChange={handleChange}
          value={note.content}
          placeholder="Take a note..."
          rows={isExpanded ? 3 : 1}
        />
        <button onClick={submitNote}>Submit</button>
      </form>
    </div>
  );
}

export default CreateArea;


import React, { useState } from "react";
//import DeleteIcon from "@material-ui/icons/Delete";
import "./styles.css";

function Note(props) {
  const [displayForm, setForm] = useState(false);
  function handleClick() {
    props.onDelete(props.id);
  }
  function handleEdit(e) {
    e.preventDefault();
    const title = e.target.children[0].value;
    const content = e.target.children[1].value;
    props.onEdit(props.id, title, content);
  
    setForm(false)
  }

  return (
    <div className="note">
      <h1>{props.title}</h1>
      <p>{props.content}</p>
      <form
        onSubmit={handleEdit}
        className={`${displayForm ? "show" : "hide"}`}
      >
        <input placeholder="title" />
        <input placeholder="content" />
        <input type="submit" />
      </form>
      <button onClick={handleClick}>X</button>
      <button onClick={() => setForm(!displayForm)}>Edit</button>
    </div>
  );
}

export default Note;


.App {
  font-family: sans-serif;
  text-align: center;
}
.show{
  display: block;
}
.hide{
  display: none;
}