Can ReactJS return a div in Bootstrap?

Question

I just started on ReactJS and came across this error

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

And the render function is this:

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

So far I know that error is caused by not returning a div, even if blank, but that's not the case. Am I doing something wrong, or React just can't return anything related to Bootstrap? (This is just a small example I was writing as practice, don't mind any minor errors)

Alexandr Lazarev Alexandr Lazarev · Accepted Answer · 2016-04-03T21:08:44

React is ok with bootstrap. You've simply made a mistake by putting return statement of the render method inside of .map() function. Your render() method returned nothing, and that's why the mentioned error was triggered. Correct code should look like:

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

Can ReactJS return a div in Bootstrap?

1 Answers