Expected corresponding JSX closing tag for input Reactjs

Question

While creating a component in Reactjs with input fields error occurs Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div>

var Main = React.createClass({
    render: function() {
        return (
            <div className="card-action">
                <i class="mdi-action-account-circle prefix"></i>
                <input id="icon_prefix" type="text" class="validate">
            </div>
        );
    }
});

Answer 1

You need to close the input element with a /> at the end.

<input id="icon_prefix" type="text" class="validate" />

Answer 2

You need to close the input element with /> at the end. In React, we have to close every element. Your code should be:

<input id="whatever-id" type="text" class="validate" />

Answer 3

All tags must have enclosing tags. In my case, the hr and input elements weren't closed properly.

Parent Error was: JSX element 'div' has no corresponding closing tag, due to code below:

<hr class="my-4">
<input
  type="password"
  id="inputPassword"
  class="form-control"
  placeholder="Password"
  required
 >

Fix:

<hr class="my-4"/>
<input
 type="password"
 id="inputPassword"
 class="form-control"
 placeholder="Password"
 required
/>

The parent elements will show errors due to child element errors. Therefore, start investigating from most inner elements up to the parent ones.

Answer 4

All these answers are valid but I had that issue multiple times today with well closed tags. If it happens to you, just abort and run npm start again.

Answer 5

This error also happens if you have got the order of your components wrong.

Example: this wrong:

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB> 

correct way:

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA> 

Answer 6

It happens when we do not close a html tag.

Make sure all the html tags are closed.

In my case it was the <br> tag. It should be <br />.

Try temporarily removing piece of code until you find which html tag closing is missing.

Answer 7

Be careful with the:

<h1>aergawergerg</h1>
<h1>aergawergerg<h1/>

beginner error.

Answer 8

You have to close all tags like , etc for this to not show.