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. R

Solution 1:

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<spankey={i}><b>Category Name:</b> {productSpec}</span>;
})}

Solution 2:

You need to return value from map handler.

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

If you do not want to (or can't in some situations) wrap content in span, you can create & return fragment (very handy)

const createFragment = require('react-addons-create-fragment');

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

Solution 3:

It might be that you are using a string so you have to use the split method and pass in an empty string such as myValue.split('').map();