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  lt  div gt   var Main   React createClass       render  function             return                lt div className  card-action  gt                   lt i class  mdi-action-account-circle prefix  gt  lt  i gt                   lt input id  icon prefix  type  text  class  validate  gt               lt  div gt

User · Answer

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>

User · Answer

It happens when we do not close a html tag  Make sure all the html tags are closed  In my case it was the  lt br gt  tag  It should be  lt br   gt   Try temporarily removing piece of code until you find which html tag closing is missing

User · Answer

You need to close the input element with a   gt  at the end      lt input id  icon prefix  type  text  class  validate    gt

User · Answer

You need to close the input element with    gt  at the end  In React  we have to close every element  Your code should be   lt input id  quot icon prefix quot  type  quot text quot  class  quot validate  quot  gt

User · Answer

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    lt hr class  my-4  gt   lt input   type  password    id  inputPassword    class  form-control    placeholder  Password    required   gt    Fix    lt hr class  my-4   gt   lt input  type  password   id  inputPassword   class  form-control   placeholder  Password   required   gt    The parent elements will show errors due to child element errors  Therefore  start investigating from most inner elements up to the parent ones

User · Answer

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

[javascript] Expected corresponding JSX closing tag for input Reactjs

Examples related to javascript

Examples related to reactjs

Examples related to reactjs-flux

Examples related to react-jsx