ReactJSがブートストラップでdivを返すことはできますか？

Question

私はちょうどReactJSに始まり、このエラーを越え

Error: Invariant Violation: CarDisplay.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

そして機能をレンダリングしてきたが、このです：

render: function() { 
    var cars = this.state.loadedCars.map(function(loaded) { 
     return (
       <div class="row"> 
        <div class="col-md-7"> 
         <a href="#"> 
          <img class="img-responsive" src="http://placehold.it/700x300" alt=""></img> 
         </a> 
        </div> 
        <div class="col-md-5"> 
         <ul class="list-group"> 
          <li class="list-group-item"><b>Brand: {loaded.brand}</b></li> 
          <li class="list-group-item"><b>Model: {loaded.model}</b></li> 
          <li class="list-group-item"><b>Fuel: </b></li> 
          <li class="list-group-item"><b>Mileage: </b></li> 
          <li class="list-group-item"><b>Location: </b></li> 
          <li class="list-group-item"><b>Price: </b></li> 
         </ul> 
         <a class="btn btn-primary" href="#">Buy it! <span class="glyphicon glyphicon-chevron-right"></span></a> 
        </div> 
       </div> 
     ); 

     console.log(cars); 

     return (<div> 
        {cars}; 
       </div> 
      ); 
    }); 
} 

これまでのところ、私はそのエラーがのdivを返さないことによって引き起こされ知っていますたとえ空白であっても、そうではありません。何かが間違っているのですか、あるいはReactはBootstrapに関連するものを返せませんか？ （これは私が練習として書いていた小さな例にすぎず、軽微な誤りは気にしないでください）

Answer 1

リアクションはブートストラップで問題ありません。レンダリングメソッドのreturn文を.map()の関数の中に置くだけで間違いを犯しました。 render()メソッドは何も返しませんでした。そのため、前述のエラーが発生しました。正しいコードは次のようになります。

render: function() { 
    var cars = this.state.loadedCars.map(function(loaded) { 
     return (
      <div class="row"> 
       <div class="col-md-7"> 
        <a href="#"> 
         <img class="img-responsive" src="http://placehold.it/700x300" alt=""></img> 
        </a> 
       </div> 
       <div class="col-md-5"> 
        <ul class="list-group"> 
         <li class="list-group-item"><b>Brand: {loaded.brand}</b></li> 
         <li class="list-group-item"><b>Model: {loaded.model}</b></li> 
         <li class="list-group-item"><b>Fuel: </b></li> 
         <li class="list-group-item"><b>Mileage: </b></li> 
         <li class="list-group-item"><b>Location: </b></li> 
         <li class="list-group-item"><b>Price: </b></li> 
        </ul> 
        <a class="btn btn-primary" href="#">Buy it! <span class="glyphicon glyphicon-chevron-right"></span></a> 
       </div> 
      </div> 
     ) 
    }); 

    console.log(cars); 

    return (
     <div> 
      {cars}; 
     </div> 
); 
}