Confused about array being parsed in React

In the code below, we’re using a simple React component taking as props an array of object containing names & jobs, building the various row of the table and eventually returning the table body.

const TableBody = (props) => {
  const rows = props.characterData.map((row, index) => {
    return (
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
      </tr>
    )
  })

  return <tbody>{rows}</tbody>
}

Where I’m confused is the last line where in JSX we’re using an array. How come <tbody>{rows}</tbody> is parsed when rows is an array?

I understand my question might be a bit confused, but if you have some resources to help out or explanations, that’d be dope!!!

Many thanks in advance and happy coding

Arrays of React elements are valid as children (a React node, which is the type of thing you’re rendering there with that array, can be a single element, an array of elements, a string, null, undefined or a boolean [true/false])

1 Like

rows is defined as the returned value of that map function, so each item in rows might look like:

<tr key="2">
  <td>Foo</td>
  <td>Bar</td>
</tr>

This is an example of one element in rows. You have defined it to be an array of React DOM elements, parsed JSX, so when we apply the {rows} it simply joins the array of those elements in place.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.