javascript - Expected Corresponding JSX closing error - Stack Overflow

admin管理员组

文章数量:1277404

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>

plete 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.

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>

plete 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.

• javascript
• reactjs

Share Improve this question Follow edited Oct 13, 2015 at 13:59 Myk Willis 12.9k55 gold badges4949 silver badges6464 bronze badges asked Oct 12, 2015 at 13:46 AbdulrahmanDevAbdulrahmanDev 4511 gold badge11 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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" />

本文标签： javascriptExpected Corresponding JSX closing errorStack Overflow