ife labolz ife labolz - 1 month ago 7
React JSX Question

map function not working in React

I am new to React JS, I was testing out some functions in fiddler. I am not sure why I get an error pointing to the map function. I am not able to render the array i defined.

Relevant snippet:

{this.props.data.productSpecs.map(function(productSpec){
<b>Category Name:</b> {productSpec};
})}


Full code:

var productCategory = {
productName: 'SamamgaTV1',
productCategory: 'Television',
productSpecs: ['32inch','black','hd']
};

var ProductComponent = React.createClass({
render: function() {
return( <div>
<h2>Product</h2>
<b>Product Name:</b> {this.props.data.productName}
<h2>Category</h2>
<b>Category Name:</b> {this.props.data.productCategory}
<h2>Specs</h2>
{this.props.data.productSpecs.map(function(productSpec){
<b>Category Name:</b> {productSpec};
})}
</div>);
}
});

ReactDOM.render(
<ProductComponent data={productCategory} />,
document.getElementById('container')
);

Answer

First you missed to return, then you must return ONE element. Here you return a <p> and a TextNode

Moreover you need to provide a unique key.

Try with this :

{this.props.data.productSpecs.map(function(productSpec, i){
        return <span key={i}><b>Category Name:</b> {productSpec}</span>;
})}
Comments