Step 2

First, stop the server and install the following library.

npm install react-markdown

Next, update the Note.js file.

  1. Import the react-markdown library
import ReactMarkdown from "react-markdown";
  1. Update where the note.text is displayed!
-  <ListItemText secondary={note.text} />
+  <ListItemText
+    secondary={<ReactMarkdown>{note.text}</ReactMarkdown>}
+  />

Now save the files and run the app.

The react-markdown is part of the remark.js markdown processor. This library is powered by many plugins that can extend the basic features of the core processor. In the next section, for instance, we will install one of these plugins.