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>
);
}
});
This question is related to
javascript
reactjs
reactjs-flux
react-jsx
You have to close all tags like , etc for this to not show.
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.
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.
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="icon_prefix" type="text" class="validate/">
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>
Source: Stackoverflow.com