ReactJs - SintassiErrore: incorporato: Contenuto JSX non terminato

Question

Sono nuovo di ReactJs e ho un problema stupido, penso, ma non riesco a vederne il motivo. Il mio codice di formazione:

var ListComponent = React.createClass({ 
    render: function() { 
     return (
      <li>{this.props.value}</li> 
     ); 
    } 
}); 

var TodoComponent = React.createClass({ 
    getInitialState: function() { 
     return { 
      listPoints: [] 
     } 
    }, 
    addListPoint: function(event) { 
     if (event.target.value !== '') { 
      this.setState({ 
       listPoints: this.state.listPoints.push(event.target.value) 
      }); 
     } 
    }, 
    render: function() { 
     var listPoints = []; 
     for (var i=0; i<this.state.listPoints.length; i++) { 
      listPoints.push(
       <ListComponent>{this.state.listPoints[i]}<ListComponent/> 
      ); 
     } 
     return (
      <ul>{listPoints}</ul> 
      <input type="text" onBlur={this.addListPoint}/> 
     ); 
    }, 
}); 


React.render(
    <TodoComponent />, 
    document.getElementById('container') 
); 

E il mio traceback:

Uncaught SyntaxError: embedded: Unterminated JSX contents (42:21) 
    40 | 
    41 | React.render(
> 42 |  <TodoComponent />, 
    |     ^
    43 |  document.getElementById('container') 
    44 |); 
    45 | 

Ogni tag sembra chiuso. Qualcuno mi indica un punto in cui è iniziata la discussione?

Answer 1

Non stai chiudendo l'elenco corretto:

<ListComponent>{this.state.listPoints[i]}</ListComponent> 

hai scritto <ListComponent/> (un tag di chiusura automatica senza contenuto)

Inoltre è necessario fare ciò che Kohei TAKATA dice che - il rendering dovrebbe avere un elemento radice (anche se in React 16+ è possibile restituire un array o avvolgere i propri elementi in <React.Fragment>).

Answer 2

La funzione render di TodoComponent restituisce 2 elementi. Penso che debba essere un elemento. Si prega di provare a racchiudere i 2 elementi per <div> o qualcosa del genere. Ti piace questa:

<div> 
    <ul>{listPoints}</ul> 
    <input type="text" onBlur={this.addListPoint}/> 
</div>