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.