React：未终止的JSX内容

Question

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>
    );
  }
}

Answer 1

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>
      );
    }
}

Answer 2

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>