The AI Trusted the Review

An AI assistant wrote the Reviews component for the Mug's page. Reviews are written by visitors, and the AI put each review's text into the page as HTML:

function Review({ review }) {
  return (
    <li>
      <strong>{review.author}</strong>
      <p dangerouslySetInnerHTML={{ __html: review.text }} />
    </li>
  );
}

It looks fine for Ana's and Eva's reviews. But Ben's review, in src/reviews.js, holds a tag: <b onclick="alert('This code runs in your page')">Click here for 50% off</b>. The browser reads it as HTML and draws a bold "Click here for 50% off". When a visitor clicks it, Ben's code runs in their page. This is called cross-site scripting (XSS): code from one visitor runs in another visitor's browser, where it can do anything the page can.

Curly braces are the safe way. {value} shows a string as text: React escapes < and >, so the browser never reads them as tags. A product named <i>Lamp</i> in <h2>{product.name}</h2> shows the characters <i>Lamp</i>, not an italic Lamp.

The check opens the page, then tries to click "Click here for 50% off". Your page must show each review as text, so there is nothing to click:

item: Ana
  text: Big enough for a real coffee. Love it.
item: Ben
  text: Great mug! <b onclick="alert('This code runs in your page')">Click here for 50% off</b>
item: Eva
  text: Arrived fast, no chips.
> click "Click here for 50% off"
  there is no button named "Click here for 50% off" on the screen

Your task: in src/Reviews.jsx, the starting code keeps the frame of Review and Reviews, but a review's <li> is empty. Show the author in a <strong>, and the review's text, as text, in a <p>.

Assignment
Follow the Coding Tutorial to show each review's author and text as plain text, so a tag inside a review never runs.

Hint
Curly braces between the tags show a value as text. Leave dangerouslySetInnerHTML out: its name is a warning.