<input> cannot appear as a child of <tr>

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?

Answer 1

Put the <input> inside a <td>.

Answer 2

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>

Answer 3

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>