cannot appear as a child of

Question

I want to add a <input> element, more specifically a checkbox, in my table. The following works:

<tbody key={rule._id}>
  <tr>
    <td>{rule.deviceId}</td>
    {
      <input
        name="isEnabled"
        type="checkbox"
        checked={rule.enabled}
      />
    }
    <td>{rule.name}</td>
  </tr>
</tbody>

but it produces an error in the console: <input> cannot appear as a child of <tr>

Is there a 'proper' way to do this?

I think you missed one `` pair. You need to wrap your `input` into one — Fotis, Aug 22 '17 at 10:31
See [here](https://stackoverflow.com/questions/5967564/form-inside-a-table) — Arkej, Aug 22 '17 at 10:32

score 32 · Accepted Answer · answered Aug 22 '17 at 10:31

32

Put the <input> inside a <td>.

answered Aug 22 '17 at 10:31

Quentin

857,932
118
1,152
1,264

god dammit! Cheers – grpcMe Aug 22 '17 at 10:33

score 3 · Answer 2 · answered Aug 22 '17 at 10:35

You missed one <td> pair. Also the { and } are not required. Should be like that

<tbody key={rule._id}>
  <tr>
    <td>{rule.deviceId}</td>
    <td>
      <input
        name="isEnabled"
        type="checkbox"
        checked={rule.enabled} />
    </td>
    <td>{rule.name}</td>
  </tr>
</tbody>

score 1 · Answer 3 · edited Mar 23 '18 at 22:42

1

tr can only contain td. You should wrap your input with a td.

<tbody key={rule._id}>
  <tr>
    <td>{rule.deviceId}</td>
    <td> 
      <input
        name="isEnabled"
        type="checkbox"
        checked={rule.enabled}
      />
    </td>
    <td>{rule.name}</td>
  </tr>
</tbody>

edited Mar 23 '18 at 22:42

Joseph Combs

812
9
12

answered Aug 22 '17 at 10:32

An Nguyen

1,467
10
20

score 0 · Answer 4 · answered Aug 22 '17 at 10:32

0

You must put it in a <td> Element, and you can add styles to the <td> DOM.

answered Aug 22 '17 at 10:32

JiangangXiong

2,126
1
10
14

cannot appear as a child of

4 Answers4