Form inside Table in react.js

Question

I need to place a HTML Form inside a Table. My code is like below

render() {
    return (
        <form className="ui form">
                <tbody>
                    <tr>
                        <td className="ui header">Name</td>
                        <td>
                            <input type="text" placeholder="Name"/>
                        </td>
                    </tr>
                </tbody>
        </form>
    );
}

I am getting below error in console.

<tbody> cannot appear as a child of <form>

Answer 1

As the error said, you can't wrap the tbody tag in a form tag. One of the alternatives would be to just wrap the input tag with the form instead of the entire table.

It would then look like this:

render() {
    return (
      <tbody>
        <tr>
          <td className="ui header">Name</td>
          <td>
            <form>
              <input type="text" placeholder="Name"/>
            </form>
          </td>
        </tr>
      </tbody>
    );
}

If you would prefer to have the whole table be within the same form tag, you will have to wrap the whole table and not just tbody.

render () {
    return (
      <form>
        <table>
            <tbody>
              <tr>
                <td className="ui header">Name</td>
                <td>
                    <input type="text" placeholder="Name"/>
                </td>
              </tr>
            </tbody>
        </table>
      </form>
    )
  }