Expected corresponding JSX closing tag for input Reactjs

166,128

Solution 1

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

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

Solution 2

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.

Solution 3

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> 

Solution 4

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.

Solution 5

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" />
Share:
166,128

Related videos on Youtube

Sajin M Aboobakkar
Author by

Sajin M Aboobakkar

JavaScript Developer

Updated on July 08, 2022

Comments

  • Sajin M Aboobakkar
    Sajin M Aboobakkar 11 months

    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>
            );
        }
    });
    
    • Asef Hossini
      Asef Hossini over 1 year
      Sometimes the error comes from the form, which has non ending inputs.
  • Pedro
    Pedro about 4 years
    Can I ask why?, (I'm new in this topic)
  • Android
    Android almost 4 years
    Please provide an explanation of how and why this solves the problem would really help to improve the quality of your post
  • Jose Browne
    Jose Browne almost 4 years
    @pedro If a tag is empty (no children elements) this is a shorthand way to close the element without having to create a matching closing element. So instead of: <div></div> . you can just do <div />. See here for more: reactjs.org/docs/…
  • Christian Vincenzo Traina
    Christian Vincenzo Traina almost 3 years
    I had a <br> and this was causing the problem (it expected a <br /> instead). This is weird because HTML5 specs advises to don't use the leading slash for self closing tags
  • Crob
    Crob almost 3 years
    @CristianTraìna It's important to remember that JSX is not HTML. JSX is it's own thing. Behind the scenes everything is converted to React.createElement and it depends on the closing of each element to know how things are intended to be nested.
  • Ecks Dee
    Ecks Dee over 2 years
    I think you meant class="validate" /> instead of class="validate/"> at the end