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):
- 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() {