How to do it...

In this recipe, we are going to create a simple Notes component to display all our notes when we visit the /notes route, but we will show one note when the user visits /notes/:noteId (we will filter the note using noteId):

  1. We need to create a new component called Notes (src/components/Notes/index.jsx), and this is the skeleton of our Notes component:
    import React, { Component } from 'react';    import './Notes.css';    class Notes extends Component {      constructor() {        super();              // For now we are going to add our notes to our         // local state, but normally this should come        // from some service.        this.state = {          notes: [            {              id: 1,              title: 'My note 1'            },            {              id: 2,              title: 'My note 2'            },            {              id: 3,              title: 'My note 3'            },          ]        };      }      render() {        

Get React Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.