Confused about array being parsed in React

JavaScript
1

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

2

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
3

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.

4

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