How to insert multidimensional array data in react js?

Question

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

Oleksandr T. · Accepted Answer · 2015-12-01 10:24:39Z

2

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

answered Dec 1, 2015 at 10:24

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sathya Over a year ago

thanks for your quick response. And also i need one more help. How to read data from web servers?

Oleksandr T. Over a year ago

@Sathya add ajax call to componentDidMound handler where you need change state with new data - like this jsfiddle.net/69z2wepo/22731. only replace in this example ajax call to you method that does ajax call - like in jquery $.ajax

Collectives™ on Stack Overflow

How to insert multidimensional array data in react js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related