ReactJS: How can I loop in react (JSX)
I want to render an array of data in a <table>. How can I loop the array and render table rows in jsx?
1190 views
1 Answer available
The most common way is to use [].map() function in order to render the <tr>s directly in return
const YourComponent = () => {
return (
<table>
<thead>
<tr>
{/* <th>... */}
</tr>
</thead>
<tbody>
{(arr || []).map((trData, index) => (
<tr key={index}>
{/* <td>... */}
</tr>
))}
</tbody>
</table>
)
}