Fetching Notes From Context Cloudnotebook App

Fetching Notes from Context API in CloudNoteBook React JS App

Fetching Notes from Context in Our CloudNoteBook App 📝🔗 Until now, every component that needed note data had to receive it through props, passed down from parent to child. But as our CloudNoteBook App grows, passing props through multiple levels (called prop drilling) becomes messy and hard to maintain. This is exactly the problem React's Context API was built to solve — and in this React JS tutorial for beginners, we'll use it to fetch and share notes across our app without passing a single prop.

In this tutorial, we will learn:

What the React Context API is and why CloudNoteBook needs it

Creating a global NoteContext with createContext

Building a NoteProvider to hold and fetch note data

Using the useContext hook to consume notes in any component

Showing a loading state while notes are being fetched from context

Rendering the fetched notes inside our CloudNoteBook UI

---

What is the React Context API?

The Context API is React's built-in way to share data — like notes, user info, or theme settings — across many components without manually passing props at every level. In CloudNoteBook, instead of each component fetching its own notes, we'll fetch them once inside a NoteProvider and let any component anywhere in the tree read them instantly using useContext.

---

Step 1: Create the NoteContext

First, create a new file context/notes/NoteContext.js. This defines the context object our whole app will use to access notes.

import { createContext } from "react";
 
const NoteContext = createContext(null);
 
export default NoteContext;

---

Step 2: Build the NoteProvider

Next, create context/notes/NoteProvider.js. This component holds our notes and loading state, fetches the notes, and makes them available to every component wrapped inside it.

import React, { useState, useEffect } from "react";
import NoteContext from "./NoteContext";
 
const NoteProvider = (props) => {
  const [notes, setNotes] = useState([]);
  const [loading, setLoading] = useState(true);
 
  const fetchNotes = () => {
    setLoading(true);
 
    // Simulated fetch — will be replaced by a real CloudNoteBook API call
    setTimeout(() => {
      setNotes([
        { id: 1, title: "Grocery List", content: "Milk, Eggs, Bread" },
        { id: 2, title: "React Context Notes", content: "useContext avoids prop drilling" },
        { id: 3, title: "Weekend Plan", content: "Finish CloudNoteBook tutorial" },
      ]);
      setLoading(false);
    }, 1000);
  };
 
  useEffect(() => {
    fetchNotes();
  }, []);
 
  return (
    <NoteContext.Provider value={{ notes, loading, fetchNotes }}>
      {props.children}
    </NoteContext.Provider>
  );
};
 
export default NoteProvider;

---

Step 3: Wrap the App with NoteProvider

Open App.js and wrap your app's routes or components inside NoteProvider, so every nested component can access notes from context.

import React from "react";
import NoteProvider from "./context/notes/NoteProvider";
import Notes from "./Notes";
 
function App() {
  return (
    <NoteProvider>
      <div className="container my-4">
        <h2 className="text-center mb-4">CloudNoteBook 📝</h2>
        <Notes />
      </div>
    </NoteProvider>
  );
}
 
export default App;

---

Step 4: Fetch Notes with useContext

Now create Notes.js. Instead of receiving notes as props, this component pulls them directly from NoteContext using the useContext hook — no prop drilling required.

import React, { useContext } from "react";
import NoteContext from "./context/notes/NoteContext";
 
const Notes = () => {
  const { notes, loading } = useContext(NoteContext);
 
  if (loading) {
    return <h5 className="text-center my-4">Loading your notes...</h5>;
  }
 
  return (
    <div className="row">
      {notes.map((note) => (
        <div className="col-md-4 mb-3" key={note.id}>
          <div className="card shadow-sm">
            <div className="card-body">
              <h5 className="card-title">{note.title}</h5>
              <p className="card-text">{note.content}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};
 
export default Notes;

---

Step 5: Full Folder Structure Recap

Here's how the Context files fit together inside the CloudNoteBook project.

src/
├── context/
│   └── notes/
│       ├── NoteContext.js
│       └── NoteProvider.js
├── Notes.js
└── App.js

---

How Context Values Flow in CloudNoteBook

Context Value	Purpose	Used In
`notes`	Holds the array of fetched notes shared across the app	Any component calling `useContext(NoteContext)`
`loading`	Tells components whether notes are still being fetched	`Notes.js` to show a loading message
`fetchNotes`	Allows any component to re-trigger fetching notes from context	Future "refresh" or "add note" features

---

Features and Learnings:-

Understood what the React Context API is and why it avoids prop drilling.

Created a dedicated NoteContext using createContext.

Built a NoteProvider that fetches and holds notes in shared state.

Wrapped the CloudNoteBook App with NoteProvider for global access.

Used the useContext hook to fetch notes directly inside Notes.js.

Displayed a loading message while notes are being fetched from context.

Prepared the CloudNoteBook App for the next step: adding, editing, and deleting notes through context.