Step 2: Fake notes

Let’s start adding “state” to the app:

import { useState } from "react";

function App() {
  const [notes, setNotes] = useState([
    {
      title: "Shoppping",
      text: "Buy milk!"
    },
    {
      title: "Study",
      text: "Review React notes."
    }
  ]);

  return (
    <>
      {
        notes.map(note => (
          <div>
            <p>{note.title}</p>
            <p>{note.text}</p>
          </div>
        ))
      }
    </>
  );
}

export default App;

Notice how I initialized the notes. It is common practice to start building an app with some fake sample data. This is so common that there are libraries to facilitate it. One such library is FakerJS. Let’s install it:

yarn add @faker-js/faker

Now update the code as follows

import { useEffect, useState } from "react";
import { faker } from "@faker-js/faker";

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

  useEffect(() => {
    const fakeNotes = [];
    for (let index = 0; index < 10; index++) {
      fakeNotes.push({
        id: faker.datatype.uuid(),
        title: faker.lorem.sentence(),
        text: faker.lorem.paragraph(),
      });
    }
    setNotes(fakeNotes);
  }, []);

  return (
    <>
      {
        notes.map(note => (
          <div>
            <p>{note.title}</p>
            <p>{note.text}</p>
          </div>
        ))
      }
    </>
  );
}

export default App;

Notice I initialize the state to an empty array and then updated it inside the useEffect hook. If were to read the notes from a database or through an API call, we would be placing it in useEffect, too.