Q:

How to insert multidimensional array data in react js?

Here, i have included a my example code. If it is one dimensional array means, i can easily insert json data's into my code. How to achieve this one with multidimensional json data with react js?
var Category = React.createClass({
  render: function() {
    return (
        <div>
          {this.props.data.map(function(el,i) {
            return <div key={i}>
                <div>
                    {el.product}
                </div>
                <div>
                    {el.quantity}
                </div>
            </div>;
          })}
        </div>
    );
  }
});

var data = [
    {
        product:"a",
        quantity:28,
        sub:[
            {
                subItem:'a'
            },
            {
                subItem:'b'
            }
        ]
    },
    {
        product:"b",
        quantity:20,
        sub:[
            {
                subItem:'a'
            },
            {
                subItem:'b'
            }
        ]
    }
];

React.render(<Category data={data}/>, document.body);

A:

You can create component for sub categories like this,
var SubCategory = React.createClass({
  render: function () {
    var list = this.props.data.map(function(el, i) {
      return <li key={i}>{ el.subItem }</li>;   
    });

    return <ul>{ list }</ul>;
  }
});

and use it in Category component 
{this.props.data.map(function(el,i) {
  return <div key={i}>
    <div>{el.product}</div>
    <div>{el.quantity}</div>
    <SubCategory data={ el.sub } />
  </div>;
})}

Example 

