Ask Question

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?

ReactJavaScriptarrayloop

96 views

Authorยดs Anki Batsukh image

Anki Batsukh

Last edited on

1 Answer available

Best answer

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>
  )
}
Last edited on