Can I name elements within components anything I want?

Question

If I have lets say App component, like this

    const App = () => {
         return(
            <div>
                <p>hello world</p>
             </div>)}

can I name div whatever i want like I did below? It works in the browser just fine but Im not sure,

      const App = () => {
           return(
                <whatever>
                     <p>hello world</p>
                </whatever>)}

Possible duplicate of [Are custom elements valid HTML5?](https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5) — JJJ, May 18 '19 at 07:28

score 1 · Answer 1 · answered May 18 '19 at 07:28

Yes you can name them whatever you like, people often do it so the markup is a bit more friendly to read and understand. For example Appcues injects their widget into your website and if you look at the markup for it, it has elements like <appcues/>.

Just check the browser support for these custom HTML tags, I think most major ones do support it but just to be safe.

Robert Hovhannisyan · Accepted Answer · 2019-05-18T08:50:35.243

1

Yes You can. But:

if You want to work with React, don't capitalize the name of div like this: <Whatever>, because it will seems to React that this is an another Component.
And when Your project gets bigger, it will start to get more complicated, so its a good practice to write tags by they names.

edited May 18 '19 at 08:50

answered May 18 '19 at 08:29

Robert Hovhannisyan

2,938
6
21
43

Can I name elements within components anything I want?

2 Answers2