-2

I am creating a website with React that has a simple search engine for some cards with information. In the Card.js file, I include a h2 tag with the name, and a p2 tag with the email. When the website is complied, the following error message appears:

index.js:1375 Warning: The tag <p2> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    in p2 (at Card.js:9)
    in div (at Card.js:7)
    in div (at Card.js:5)
    in Card (at CardList.js:10)
    in div (at CardList.js:6)
    in CardList (at App.js:28)
    in div (at App.js:25)
    in App (at src/index.js:9)

Tried changing the p2 tag to "P2" but it does not compile.

Card.js file:

import React from 'react';

const Card = ({name, email, id}) => {
    return (
        <div className='tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
            <img alt='photos' src={`https://robohash.org/${id}?200x200`} />
            <div>
                <h2>{ name }</h2>
                <p2>{ email }</p2>
            </div>
        </div>
    );
}

export default Card;
Adam Khakhar
  • 11
  • 1
  • 2

2 Answers2

2

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML element p2 does not exist. Try using only p.

Addition: It may work with static content built purely of html and css, however it's not a recommended practice.

Check: Why does CSS work with fake elements?

João Teixeira
  • 119
  • 1
  • 12
Len Art
  • 71
  • 4
1

A bit more on this topic:

It is a bad practice to extend HTML or any markup language in an ad hoc manner by adding unqualified elements. In the future, the W3C may be extended to include elements like P2. A better practice is to use a CSS class to derive the same result:

<p>Normal content</p>
<p class="my-p2">P2 content</p>

I contributed to the W3c and we heavily discouraged people from extending recommendations (the official term for W3C "standards") in an ad hoc manner. If you must extend it, use a namespace to avoid future conflicts like this:

<my-namespace:p2>my P2 content</my-namespace:p2>
Duane Nickull
  • 19
  • 1