Why do I get the error Unterminated JSX contents for the closing div-element? What am I doing wrong?
export default class Search extends Component {
render() {
return (
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="circular search link icon"></i>
</div>
);
}
}
Issue is, you forgot to close your input element, in JSX you have to close all the opened tags properly like in XML.
As per DOC:
JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
One more thing, class is a reserved keyword, to apply any css class instead of using the class keyword, use className.
Try this:
export default class Search extends Component {
render() {
return (
<div className="ui icon input">
<input type="text" placeholder="Search..."/>
<i className="circular search link icon"></i>
</div>
);
}
}
Your input JSX element is not terminated, it is missing a closing tag.
And class is a reserved name in Javascript. You need to use the className prop instead.
<div className="ui icon input">
<input type="text" placeholder="Search..." />
<i className="circular search link icon"></i>
</div>