How do I iterate nested arrays in a React component?

Question

I have a multidimensional array: an array results containing 18 arrays row, each containing 6 numbers.

I want to render this as a table. The logic would be

results.each as (row)
     <tr>
         row.each as (number)
               <td>number</td>
     </tr>

But I can't figure out how you'd write this in JSX.

const Resultset = props => (
    {props.rows.map(rows => {
        <tr>
            {rows.map(number => <td>{number}</td>)}
        </tr>
    })}
);

But that's not right. What's the procedure for this, how do you nest the map calls and interpolations?

manonthemat · Accepted Answer · 2016-02-07 05:53:04Z

One way to do it

var arr = [ [ 2, 3, 4, 5, 6, 7 ],
  [ 8, 9, 10, 11, 12, 13 ],
  [ 14, 15, 16, 17, 18, 19 ],
  [ 20, 21, 22, 23, 24, 25 ],
  [ 26, 27, 28, 29, 30, 31 ],
  [ 32, 33, 34, 35, 36, 37 ],
  [ 38, 39, 40, 41, 42, 43 ],
  [ 44, 45, 46, 47, 48, 49 ],
  [ 50, 51, 52, 53, 54, 55 ],
  [ 56, 57, 58, 59, 60, 61 ],
  [ 62, 63, 64, 65, 66, 67 ],
  [ 68, 69, 70, 71, 72, 73 ],
  [ 74, 75, 76, 77, 78, 79 ],
  [ 80, 81, 82, 83, 84, 85 ],
  [ 86, 87, 88, 89, 90, 91 ],
  [ 92, 93, 94, 95, 96, 97 ],
  [ 98, 99, 100, 101, 102, 103 ],
  [ 104, 105, 106, 107, 108, 109 ] ];

var Hello = React.createClass({
  tablerows: function() {
    return this.props.arr.map(rows => {
        var row = rows.map(cell => <td>{cell}</td>); 
        return <tr>{row}</tr>;
    });
  },
  render: function() {
    return <table>{this.tablerows()}</table>;
  }
});

ReactDOM.render(
  <Hello arr={arr} />,
  document.getElementById('container')
);

In action: https://jsfiddle.net/69z2wepo/30476/

oobgam · Accepted Answer · 2016-02-07 05:59:51Z

5

I would suggest separating the components to Resultset, NumberComponent and try to be consistent with the arrow functions.

// Explicit return

const NumberComponent = props => {
    return (
        <td>{ props.number }</td>
    )
}

const Resultset = props => {
    return (
        <tr>
            {
                props.rows.map( number => <NumberComponent number={number} />)
            }
        </tr>
    )
}

// Implicit return

const NumberComponent = props => (<td>{ props.number }</td>);

const Resultset = props => (
    <tr>
        {
            props.rows.map( number => <NumberComponent number={number} />)
        }
    </tr>
);

answered Feb 7, 2016 at 5:59

oobgam

1,3098 silver badges10 bronze badges

Comments

edencorbin · Accepted Answer · 2017-07-17 04:34:38Z

0

This worked well for me to map an array of arrays, I have named the array that contains arrays root, I set up to functions as so:

//root render function

renderNested = (row, i) => {
    return (
        root.map(function (row, i) {
            return (
            <div key={i}>
                {this.renderNested(row, i)}
            </div>
            )
        }, this)
    )
}

//nested render function

renderNested = (row, i) => {
    return (
        row.map(function (innerrow, ii) {
            return(
                <span key={ii}>
                    Nested content here
                </span>
            )
        }, this)
    )
}

answered Jul 17, 2017 at 4:34

edencorbin

3,0297 gold badges36 silver badges50 bronze badges

Comments

Franco Manzur · Accepted Answer · 2018-04-05 07:42:03Z

0

You can iterate the first part of the array and in the second iteration you can call another component and pass the second array as a prop

const Resultset = props => (
{props.rows.map(rows => {
    <tr>
        <AnotherComponent rows={rows} />
    </tr>
})}
);

In another component you repeat the same map proccess.

answered Apr 5, 2018 at 7:42

Franco Manzur

3731 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

How do I iterate nested arrays in a React component?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related