I.Swen I.Swen - 19 days ago 5
React JSX Question

Data error in ReactJS

I need some validation data. If the input data contains an error - display a message, if not - render component. Why this syntax contains an error (the first block if...else)? Thaks!
........................................................................................................................................................................................................................................................................................................................................

var WeatherItem = React.createClass({
render: function() {
if({this.props.cityid} == false){
alert('false');
}
else{
return (
<div className = "weatherItem">
<h2 className = "weatherHeader"> {this.props.type}</h2>
<img className = "weatherImg" src={this.props.src} />
<p className = "weatherTemp" >{this.props.temp}{this.props.tempFrom}{this.props.tempTo} C</p>
</div>
);
}
}
});

var WeatherList = React.createClass({
render: function() {
var weatherNodes = this.props.data.map(function(weatherItem){
return (
<WeatherItem
cityid = {weatherItem.cityid}
type = {weatherItem.type}
src = {weatherItem.src}
temp = {weatherItem.temp}
tempFrom = {weatherItem.tempFrom}
tempTo = {weatherItem.tempTo}
key = {weatherItem.id}>
</WeatherItem>
);
});
return (
<div className="weatherList">
{weatherNodes}
</div>
);
}
});

ReactDOM.render(
<WeatherBox url="weather.php" />,
document.getElementById('content')
);

Answer

if({this.props.cityid} == false) is not a proper javascript syntax. Change this to if(this.props.cityid == false)

if({this.props.cityid} == false) can be used only when defining JSX Elements.

Comments