CODEWITHSUNDEEP
javascriptreactjs
user3142695
user3142695

Reputation: 17332

React: Unterminated JSX contents

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

Upvotes: 5

Views: 17287

Answers (3)

Angel
Angel

Reputation: 1

import React, { Component } from 'react';

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

export default Counter;

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104369

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

Upvotes: 6

Arun Kumar Mohan
Arun Kumar Mohan

Reputation: 11905

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>

Upvotes: 1

Related Questions