Value empty in react UI but visible in the console

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>      
    )
   }  
});

Yury Tarabanko · Accepted Answer · 2016-08-08 11:55:32Z

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>      
    )
   }  
});

Collectives™ on Stack Overflow

Value empty in react UI but visible in the console

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related