Value empty in react UI but visible in the console - reactjs

Question

I was using react with flux. When I checked in the console, values are coming but when I check in React developer tools, expected value is empty. If I am sending a single object then it is working fine. But if an array is sent, then nothing is displayed.
Can anybody please tell what is the problem? The code and image of the same is as below.
Code:
var Product = React.createClass({
render: function(){
var product = this.props.product;
return (<div className="col-md-8"><hr/>
{product.map(function(items){
console.log(" Items in the field :"+JSON.stringify(items));
<div className="col-sm-6">
<div className="col-sm-4">
<img src={"/src/image/"+ items.image}/>
</div>
<div className="col-sm-2">
<h2> {items.name} </h2>
<p> {items.description} </p>
<h3> Price: ${items.price} </h3>
<h4>Inventory: {items.inventory}</h4>
</div>
</div>
})}
</div>
)
}
});

Answer 1

You need to return from function call
var Product = React.createClass({
render: function(){
var product = this.props.product;
return (<div className="col-md-8"><hr/>
{product.map(function(items){
console.log(" Items in the field :"+JSON.stringify(items));
return (<div className="col-sm-6">
<div className="col-sm-4">
<img src={"/src/image/"+ items.image}/>
</div>
<div className="col-sm-2">
<h2> {items.name} </h2>
<p> {items.description} </p>
<h3> Price: ${items.price} </h3>
<h4>Inventory: {items.inventory}</h4>
</div>
</div>);
})}
</div>
)
}
});