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.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With