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

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

• javascript
• reactjs

Share Improve this question Follow asked Jan 29, 2017 at 17:04 user3142695user3142695 17.4k5555 gold badges197197 silver badges375375 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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>

import React, { Component } from 'react';

class Counter extends Component {
    render() {
        return  (
            <div>
                <h1>Hello World</h1>
                <button>Increment</button>
            </div>
        );        
    }
}

export default Counter;