map function not working in React

All we need is an easy explanation of the problem, so here it is.

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:

        <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>
              <b>Product Name:</b> {}
              <b>Category Name:</b> {}
                <b>Category Name:</b> {productSpec};

  <ProductComponent data={productCategory} />,

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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 :

{, i){
        return <span key={i}><b>Category Name:</b> {productSpec}</span>;

Method 2

You need to return value from map handler.

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

    return createFragment({
        bold: <b>Category Name:</b>,
        spec: productSpec,

Method 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();

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply