Loading video...

Solution

HTML to JSX Solution

The final Pricing component should have a single parent element, convert class to className, change <hr> to <hr /> and return JSX, not a string:

export default function Pricing() {
  return (
    <div>
      <h2 className="title">Simple no-tricks pricing</h2>
      <hr />
      <a href="/buy" className="button">
        Buy Now <span aria-hidden="true">→</span>
      </a>
    </div>
  );
}

Transcript

There are a bunch of hoops to jump through to solve this particular problem. First, we need to remove the backticks so that we no longer have a template literal, but we have actual JSX. Now we're being told that JSX expressions must have one parent element.

So to fix this, we want to remove all of our JSX here, and a really good practice to always adopt is to add a set of parentheses, you're going to need to add parentheses to return all of your JSX unless all of it fits on one line. So if this was just a div with the text "pricing", this could all fit on one line. But since there's multiple lines, we always want to use a set of parentheses here. Now, we still need to fix this error.

So to add a parent element, we could just wrap it with a standard div. And then the next error that we see is that our HR, our horizontal line doesn't have a closing tag, we could either fix this by adding a closing tag like this, or we could self-close HR because it only it's just a single tag. And now moving on to the attributes. As we mentioned, class needs to be changed to className, because there are classes in JavaScript.

So we want to change both of those to className so our styles can be applied. And finally, notice that this aria-hidden attribute is being set to "true" this is actually valid. This is only the case with a couple of types of attributes. Aria is one of them. This is one type of attribute; accessibility tags can be prefixed with Aria and the dash; they don't need to be written in camel case like this. So this is entirely valid to write.

So now we can save this and we have our pricing component with our styles applied, and we don't have any more linting errors.