Why I got such an warning into the console i.e The tag buttton is unrecognized in this browser

Question

Here is my code

const templateOne = <div>
    <h1>{app.heading}</h1>
    <p>{app.subHeading}</p>
    <ol>
        <li>Item One</li>
        <li>Item Two</li>
    </ol>
    <form>
        <input type="text"></input>
        <buttton>addOptions</buttton>
    </form>
</div>

ReactDom.render(templateOne, document.getElementById('root))

Then I got the warning i.e react-dom.development.js:82 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter in buttton,in form,in div

The error message could *not* be any clearer. React components need to start with an uppcercase letter. So `templateOne` --> `TemplateOne` — Jayce444, Sep 27 '20 at 07:38

score 1 · Answer 1 · answered Sep 27 '20 at 07:38

1

Correct the spelling of <button>

Man I also got the same warning first..

The problem is that all react components should start with an Uppercase letter.

If you change templateOne to TemplateOne then it should be fine.

Also change it here.

ReactDom.render(TemplateOne, document.getElementById('root))

The warning should disappear.

answered Sep 27 '20 at 07:38

Hard Code Programmer

196
2
14

If this answer is helpful then please mark this as **Accepted Answer**. It would mean a lot to me – Hard Code Programmer Sep 27 '20 at 07:39

score 0 · Answer 2 · answered Sep 27 '20 at 08:16

Updated code:-

const MyComponent = <div>
    <h1>{app.heading}</h1>
    <p>{app.subHeading}</p>
    <ol>
        <li>Item One</li>
        <li>Item Two</li>
    </ol>
    <form>
        <input type="text"></input>
        <button>addOptions</buttton>
    </form>
</div>


ReactDom.render(MyComponent, document.getElementById('root));

If the component is creating with the lowercase, react will take it as a normal Html tag. So always create your component starting with uppercase.

read more - ReactJS component names must begin with capital letters?

Why I got such an warning into the console i.e The tag buttton is unrecognized in this browser

2 Answers2