CODEWITHSUNDEEP
javascriptreactjsreact-hooks
user944513
user944513

Reputation: 12729

<td> cannot appear as a child of `div`?

I am following this example https://codesandbox.io/s/little-star-yq2h8 which use state. Now I make the same example using hooks

but getting this error

validateDOMNesting(...): <td> cannot appear as a child of <div>.
    in td (at editable-cell.js:34)
    in div (at editable-cell.js:56)
    in EditableCell (created by TableCell)
    in TableCell (created by TableRow)
    in tr (created by BodyRow)
    in BodyRow (created by TableRow)
    in TableRow (created by Connect(TableRow))
    in Connect(TableRow) (created by ExpandableRow)
    in ExpandableRow (created by Conne

and row view is not reflecting why ? here is my code https://codesandbox.io/s/reverent-burnell-l504y

const PmViewList = () => {
  return (
    <Fragment>
      <EditableFormTable />
    </Fragment>
  );
};

Upvotes: 1

Views: 2155

Answers (1)

StriplingWarrior
StriplingWarrior

Reputation: 156469

It looks like the editable-cell component is returning this:

        <div>
            <EditableContext.Consumer>{renderCell}</EditableContext.Consumer>
        </div>

Meanwhile renderCell returns something like this:

               <td {...restProps}>
                   [cell contents]
               </td>

My experience with react is limited, but I'm guessing that means that your cell is going to produce HTML that has a <div> with a <td> inside of it, which is not valid. <td>s are only allowed inside of table-oriented elements like <tr>.

Simply removing those <div> tags appears to make things work: enter image description here

Upvotes: 4

Related Questions