javascript

How to use loop in React JSX

The best way to use a loop in React JSX template is using map function or you can also implement loop using javascript for loop in React JSX template.

//USING FOR LOOP
<tbody>
    for (var i=0; i < items.length; i++) {
        <TableRow obj={items[i]} key={i}>
    }
</tbody>

//USING map function
<tbody>
    {items.map(function(item, index) {
        return <TableRow obj={item} key={index} />;
    })}
</tbody>

//ES6 SYNTAX
<tbody>
    {items.map((item, index) => <TableRow obj={item} key={index} />)}
</tbody>

Was this helpful?