CODEWITHSUNDEEP
reactjs
GreenTriangle
GreenTriangle

Reputation: 2460

Why can't an element defined inside a tr be a child of a tbody?

I'm making a little lottery game to learn React. The goal is something like this: click a button and it fills a table 18x6 with random numbers.

So I have a table, and that table has a tbody.

I define a React component, Ball, which represents a single table cell containing a number 1-40:

const Ball = props => {
    return (
        <td className="ball">
            {Math.floor(Math.random() * (40 - 1) + 1)}
        </td>
    );
}

Then I define a ballRow, which is simply a row of six balls.

const ballRow = props => {
    return (
        <tr>
            <Ball />
            <Ball />
            <Ball />
            <Ball />
            <Ball />
            <Ball />
        </tr>
    );
}

Now I render my first row in the table:

ReactDOM.render(<ballRow />, document.getElementsByTagName("tbody")[0]);

But this fails because <ballrow> cannot appear as a child of <tbody>.

This confuses me. A ballrow is a tr element, which is exactly what goes inside a tbody. So why wouldn't it be a valid child?

Upvotes: 3

Views: 1116

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

Change ballRow to BallRow.

const BallRow = props => {
  return (
    <tr>
      <Ball />
      <Ball />
      <Ball />
      <Ball />
      <Ball />
      <Ball />
    </tr>
  );
}

ReactDOM.render(<BallRow />, document.getElementsByTagName("tbody")[0]);

Example

the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).

Upvotes: 2

Related Questions