Value empty in react UI but visible in the console
<p>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.</p>

<p>Can anybody please tell what is the problem? The code and image of the same is as below.</p>

<p><strong>Code:</strong></p>

<pre><code>var Product = React.createClass({
   render: function(){
    var product = this.props.product;

    return (&lt;div className="col-md-8"&gt;&lt;hr/&gt;
        {product.map(function(items){           
                console.log(" Items in the field :"+JSON.stringify(items));             
            &lt;div className="col-sm-6"&gt;
                    &lt;div className="col-sm-4"&gt;
                    &lt;img src={"/src/image/"+ items.image}/&gt;
                    &lt;/div&gt;
                    &lt;div className="col-sm-2"&gt;
                    &lt;h2&gt; {items.name}               &lt;/h2&gt;
                    &lt;p&gt;  {items.description}   &lt;/p&gt;
                    &lt;h3&gt; Price: ${items.price} &lt;/h3&gt;
                    &lt;h4&gt;Inventory: {items.inventory}&lt;/h4&gt;
                    &lt;/div&gt;
            &lt;/div&gt;
        })}
            &lt;/div&gt;      
    )
   }  
});
</code></pre>

<p><a href="https://i.stack.imgur.com/dMwEl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dMwEl.png" alt="Image 1"></a></p>

<p><a href="https://i.stack.imgur.com/X5q2j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5q2j.png" alt="Image2"></a></p>