Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expected Corresponding JSX closing error

I am building web app in Reactjs. In the loop of mapping the records from data server, I get this error:

Expected Corresponding JSX closing

at this line

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

complete catalog.jsx code:

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"';
  }

});

I need to figure out this error.

like image 750
AbdulrahmanDev Avatar asked Feb 09 '23 20:02

AbdulrahmanDev


1 Answers

All tags need to be closed: Self-closing tags

You need a / in your <br> and <img> tags.

<br />
<img src="images/small-blue.png" />
like image 103
Clarkie Avatar answered Feb 11 '23 14:02

Clarkie