ReactJs - SyntaxError：埋め込み：終了していないJSXの内容

Question

私はReactJsを初めて使っています。私は愚かな問題を抱えていますが、理由はわかりません。 マイトレーニングコード：

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

そして、私のトレースバック：

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

すべてのタグが閉じられているようです。誰かが私に問題が始まった場所を指摘していますか？

Answer 1

：このよう

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

は、あなたが（コンテンツのない自己終了タグ）<ListComponent/>を書いたが

また、あなたは何をする必要がありますTAKATA Koheiは、1つのルート要素を持つ必要があります（ただし、React 16+では配列を返すことも、<React.Fragment>に要素をラップすることもできます）。

Answer 2

renderのTodoComponentの機能は、2つの要素を返します。 私はそれが1つの要素でなければならないと思います。 2つの要素を<div>などで囲んでください。あなたが適切にあなたのリストを閉じていない

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