Update Notes in react js

by vsasikalabe Updated: Jan 24, 2023

Edit notes are comments left by users on an edit and are an important form of communication between users on the site. They can either be entered at the same time as an edit, or can be added to an existing edit.This can happen when state or props changes. It can also happen when forceUpdate is called. Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated.Material UI is an open-source React component library that implements Google's Material Design. It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box.

Preview of the output that you will get on running this code from your IDE.

Code:

In this solution we use the React library.

Unable to update Notes in react js

Lines of Code : 172License : CC BY-SA 4.0

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;
}

Instructions

Follow the steps carefully to get the output easily.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
npm i @material-ui/core --force
npm i @material-ui/icons --force
npm i uuid --force
Open the folder in IDE.
Create components folder here we have to create App.jsx, CreateArea.jsx, Footer.jsx,Header.jsx ,style.css and Note.jsx files.
Click on the topic of the code.Copy the code using "copy" button above and paste it in App.jsx file.Do the same steps for other files.(refer DEMO for additional files).
Open the terminal from IDE.
npm start to run the file.

You can also refer this url DEMO for getting the above output.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.

I found this code snippet by searching for Update Notes in react js in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in VS Code 1.73.1 version.
The solution is tested on Nodejs 16.14.2 version.
react 18.2.0 version.
@material-ui/core: 4.12.4 version.
@material-ui/icons: 4.11.3 version.
uuid: 9.0.0 version.

Using this solution, we are able to Update Notes in react js with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to Update Notes in react js.