title: Unable to update Notes in react js
body: <p>Can anyone help me out with code means how to edit a text in notes
  Anyone help me out. I have put all the code and I need the edit code I am not figuring it out
  If anyone get the code then please help me out so that I can understand and implement it further Also tell me that I have to prepared new file or editing in this file do the job for me. And if it done in it then how please give me the proper information
  Thanks<br />
  Ignore from here
  contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
  classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
  professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
  consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
  literature, discovered the undoubtable source. Lorem Ipsum</p>
  <p><strong>App.jsx</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Header from &quot;./Header&quot;;
  import Footer from &quot;./Footer&quot;;
  import Note from &quot;./Note&quot;;
  import CreateArea from &quot;./CreateArea&quot;;
  
  function App() {
    const [notes, setNotes] = useState([]);
  
    function addNote(newNote) {
      setNotes(prevNotes =&gt; {
        return [...prevNotes, newNote];
      });
    }
  
    function deleteNote(id) {
      setNotes(prevNotes =&gt; {
        return prevNotes.filter((noteItem, index) =&gt; {
          return index !== id;
        });
      });
    }
  
    return (
      &lt;div&gt;
        &lt;Header /&gt;
        &lt;CreateArea onAdd={addNote} /&gt;
        {notes.map((noteItem, index) =&gt; {
          return (
            &lt;Note
              key={index}
              id={index}
              title={noteItem.title}
              content={noteItem.content}
              onDelete={deleteNote}
            /&gt;
          );
        })}
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>Note.jsx</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import DeleteIcon from &quot;@material-ui/icons/Delete&quot;;
  
  function Note(props) {
  
    function handleClick() {
      props.onDelete(props.id);
    }
  
    return (
      &lt;div className=&quot;note&quot;&gt;
        &lt;h1&gt;{props.title}&lt;/h1&gt;
        &lt;p&gt;{props.content}&lt;/p&gt;
        &lt;button onClick={handleClick}&gt;
          &lt;DeleteIcon /&gt;
        &lt;/button&gt;
        &lt;button&gt;
          Edit
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default Note;
  </code></pre>
  <p><strong>CreateArea.jsx</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import AddIcon from &quot;@material-ui/icons/Add&quot;;
  import Fab from &quot;@material-ui/core/Fab&quot;;
  import Zoom from &quot;@material-ui/core/Zoom&quot;;
  
  function CreateArea(props) {
    const [isExpanded, setExpanded] = useState(false);
  
    const [note, setNote] = useState({
      title: &quot;&quot;,
      content: &quot;&quot;
    });
  
    function handleChange(event) {
      const { name, value } = event.target;
  
      setNote(prevNote =&gt; {
        return {
          ...prevNote,
          [name]: value
        };
      });
    }
  
    function submitNote(event) {
      props.onAdd(note);
      setNote({
        title: &quot;&quot;,
        content: &quot;&quot;
      });
      event.preventDefault();
    }
  
    function expand() {
      setExpanded(true);
    }
  
    return (
      &lt;div&gt;
        &lt;form className=&quot;create-note&quot;&gt;
          {isExpanded &amp;&amp; (
            &lt;input
              name=&quot;title&quot;
              onChange={handleChange}
              value={note.title}
              placeholder=&quot;Title&quot;
            /&gt;
          )}
  
          &lt;textarea
            name=&quot;content&quot;
            onClick={expand}
            onChange={handleChange}
            value={note.content}
            placeholder=&quot;Take a note...&quot;
            rows={isExpanded ? 3 : 1}
          /&gt;
          &lt;Zoom in={isExpanded}&gt;
            &lt;Fab onClick={submitNote}&gt;
              &lt;AddIcon /&gt;
            &lt;/Fab&gt;
          &lt;/Zoom&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  
  export default CreateArea;
  </code></pre>