React and Firebase Tutorial: Build a CRUD Notes App

This Note App built with React and Firebase allows you to easily create, read, update, and delete notes in real-time. With the app’s intuitive user interface and seamless integration with Firebase, you can save your notes securely and access them from any device. Whether you’re a student, professional, or just someone who needs to jot down ideas, this Note App is perfect for you.

https://youtu.be/d6hsSCGZUc8

firebase-config.jsx:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import {getFirestore} from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  /* config here */
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

Note.jsx

import React from 'react'
import DisplayNote from './DisplayNote';
import { useState } from 'react';
import { useEffect } from 'react';
import { collection, getDocs, addDoc, deleteDoc, doc, updateDoc } from 'firebase/firestore';
import { db } from '../firebase-config';

const Note = () => {
  const [notes, setNotes] = useState([])
  const [addNote, setAddNote] = useState({ title: "", content: "" })
  const [id, setId] = useState("")

  const noteRef = collection(db, "note")

  useEffect(() => {
    const getNotes = async () => {
      const data = await getDocs(noteRef)
      // console.log(data);
      setNotes(data.docs.map((docs) => ({ ...docs.data(), id: docs.id })))
    }
    getNotes()
  }, [noteRef])

  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setAddNote({ ...addNote, [name]: value })
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    // console.log(addNote);
    await addDoc(noteRef, addNote)
  }

  const deleteNote = async (id) => {
    // console.log(id);
    const deletenote = doc(noteRef, id)
    await deleteDoc(deletenote)
  }

  const updateNote = async (note) => {
    // console.log(note);
    setAddNote({title: note.title, content: note.content})
    setId(note.id)
  }

  const updatedNote = async (id) =>{
    console.log(id);
    const updatenote = doc(db, "note", id)
    await updateDoc(updatenote, addNote)
  }

  return (
    <div className="container">

      <form method='post' onSubmit={handleSubmit}>
        <input type="text" name="title" placeholder="Enter Title..." onChange={handleChange} value={addNote.title} required/>
        <textarea name="content" placeholder='Type Content Here...' onChange={handleChange} value={addNote.content} rows="4" required></textarea>
        <div style={{ "display": "flex" }}>
          <button type='submit'>submit</button>
          <button style={{marginLeft: "10px"}} type='button' onClick={()=>updatedNote(id)}>update</button>
        </div>
      </form>

      <div className='note-container'>
        {notes && notes.map((note) => (
          <DisplayNote title={note.title} content={note.content} id={note.id} getId={deleteNote} getUpdateNoteId={updateNote} />
        ))}
      </div>
    </div>
  )
}

export default Note;

DisplayNote.jsx

import React from 'react'

const DisplayNote = (props) => {

  const handleClick = (id) =>{
    props.getId(id)
  }

  const handleUpdate = (note) =>{
    props.getUpdateNoteId(note)
  }



  return (
    <div className="note" key={props.id}>
        <p className="title">{props.title}</p>
        <p className="content">{props.content}</p>
        <button onClick={()=>handleClick(props.id)}>delete</button>
        <button style={{"marginLeft": "10px"}} onClick={()=>handleUpdate({content: props.content, title: props.title, id: props.id})}>update</button>
      </div>
  )
}

export default DisplayNote;

Leave a Reply

For News Subscribe Us!

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

© 2022 Code With AM