Ожидаемая ошибка закрытия JSX

Question

Я создаю веб-приложение в Reactjs. В цикле отображения записей с сервера данных, я получаю эту ошибку:

Expected Corresponding JSX closing

на этой линии

<h5>Still Water <br> 500 ml</h5> 

полный код catalog.jsx:

var React = require('react'); 
var Parse = require('parse').Parse; 
var ParseReact = require('parse-react'); 

module.exports = React.createClass({ 
mixins: [ParseReact.Mixin], 

getInitialState: function() { 
    return { 
    error: null, 
    signup: false 
    }; 
}, 
//Observe Function - a newly proposed function for prarse react integration 
observe: function() { 
    //declare any variable you need here. 
    return { 
    product: (new Parse.Query('product')) 
       .ascending('createdAt') 
    }; 
}, 

    render: function() { 
    var content = (
     <div> 
     no product 
     </div> 
    ); 

    if(this.data.product.length){ 
     var content = (
     <div > 
      {this.data.product.map(function(p) { 

      return (
       //<div>Abdulrhman</div> 

       //From Design 
       <div className="col-md-4"> 

        <div className="item text-center"> 

         <div className="photo"> 
          <img src="images/small-blue.png"> 
          <br><br> 
          <h5>Still Water <br> 500 ml</h5> 
         </div> 

         <div className="action"> 
          <button type="button" className="btn btn-primary">Add</button> 
         </div> 

        </div> 
       </div> 

      ); 
      }, this)} 
     </div> 

    ); 

    } 
    else{ 
     var content = (<div> 

     </div>) 
     } 
    return content; 
    }, 

    ImgSizeFnc: function(size){ 
    if(size === 'small') 
    return 'width="100px" height="1000px"'; 
    } 

}); 

Мне нужно фигуры из этой ошибки.

Answer 1

Все теги должны быть закрыты: Self-closing tags

вам нужно в <br> и <img> тегов в /.

<br /> 
<img src="images/small-blue.png" />