¿Por qué aparece el error Unterminated JSX contents para el elemento div de cierre? ¿Qué estoy haciendo mal?
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> ); } }El problema es que olvidó cerrar su elemento de input , en JSX debe cerrar todas las tags abiertas correctamente como en XML .
Según DOC :
JSX es una extensión de sintaxis similar a XML para ECMAScript sin ninguna semántica definida. Está destinado a ser utilizado por varios preprocesadores (transpiladores) para transformar estos tokens en ECMAScript estándar.
Una cosa más, class es una palabra clave reservada, para aplicar cualquier clase css en lugar de usar la palabra clave class , use className .
Prueba esto:
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> ); } }Su elemento JSX input no está terminado, le falta una etiqueta de cierre.
Y class es un nombre reservado en Javascript. En su lugar, debe usar el accesorio className .
<div className="ui icon input"> <input type="text" placeholder="Search..." /> <i className="circular search link icon"></i> </div>