Note model

Set up the Note model and state.

The Note model and state

In this lesson we move the Note model into state. A note is an object with id, title and body fields. We will add the first note: { id: "1", title: "Shopping", body: "Milk, bread" }.

The initial value of the state will be a single-element array. This way the app shows one note ready when it opens. In later lessons we will learn how the user can add new notes; for now we see how the model lands in state. We will also read a field of a note: notes[0].title returns the title of the first note.

Exercise Add the first note

Add the first note to the NotesApp component. Give useState the initial value [{ id: "1", title: "Shopping", body: "Milk, bread" }]. The component keeps returning <Text>Notes</Text>.

Show example solution

import { useState } from "react";
import { Text } from "react-native";

function NotesApp() {
  const [notes, setNotes] = useState([{ id: "1", title: "Shopping", body: "Milk, bread" }]);
  return <Text>Notes</Text>;
}

Showing notes

To show the notes held in state on screen you use a list. In React Native FlatList is the most common choice; it is efficient for large lists. Each note is shown inside a Text.

In this lesson we will not move to FlatList yet; we will just print the first note's title with a simple Text. In later lessons we will show all notes as a list. Start small, then grow; this keeps projects solid. For now the point is to see how state is read.

Test yourself

Read the title field

const firstTitle = notes[0].____;

Show answer

const firstTitle = notes[0].title;

Which field of a Note is unique?
```
const note = { id: "1", title: "Alışveriş", body: "Süt" };
```
- title
- body
- createdAt
- id
Show answer

id — answer: id. Two notes cannot share an id.
Match the state and fields

useState

Holds state
notes[0]

First note
title

Title field
id

Unique id

Next lesson: Adding notes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies