CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-router
Kousha
Kousha

Reputation: 36219

Invariant Violation: findComponentRoot when using Link & Tables

I'm using react-router for my routing. I have a table and I want the rows to be clickable.

So I have:

<table className="table table-hover table-bordered" cellSpacing="0" width="100%">
<thead>
<tr>
    <th>ID</th>
    <th>GUID</th>
    <th>Patch Name</th>
    <th>Description</th>
    <th>Creation Date</th>
</tr>
</thead>

<tbody>
{patches.map(function (patch) {
    return (
        <tr className="cursor-pointer">
            <Link to="patch" params={{patchId:patch.id}}>
                <td>{patch.id}</td>
                <td>{patch.guid}</td>
                <td>{patch.name}</td>
                <td>{patch.description}</td>
                <td>{moment(patch.creation_date).format('MMMM Do YYYY')}</td>
            </Link>
        </tr>
    );
})}
</tbody>
</table>

Upon clicking a row, I get

Error: Invariant Violation: findComponentRoot(..., .0.2.0.0.0.0.0.0.1.0.1.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like ,

, or , or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID ``.

If I move <Link> to before <tr>, i.e:

<Link to="patch" params={{patchId:patch.id}}>
    <tr className="cursor-pointer">
        <td>{patch.id}</td>
        <td>{patch.guid}</td>
        <td>{patch.name}</td>
        <td>{patch.description}</td>
        <td>{moment(patch.creation_date).format('MMMM Do YYYY')}</td>
    </tr>
</Link>

Then it works fine, but the table CSS is completely messed up. What's going on?

Upvotes: 1

Views: 503

Answers (1)

Alexandre Kirszenberg
Alexandre Kirszenberg

Reputation: 36418

<Link> renders a <a> element, but a <tr> element only accepts <th> or <td> elements as children.

The same goes for <tbody> and <table>, which only accept a subset of HTML elements as children.

Your browser will automatically try to fix your HTML. React, unaware of this behaviour, will throw when the DOM structure doesn't match its expectations. As the error points out, this usually happens when outputting an invalid HTML structure in your render method.

If you want your whole <tr> to act as a link, you should render a link in each of your table cells.

<tr className="cursor-pointer">
    <td>
        <Link to="patch" params={{patchId:patch.id}}>
            {patch.id}
        </Link>
    </td>
    <td>
        <Link to="patch" params={{patchId:patch.id}}>
            {patch.guid}
        </Link>
    </td>
    {/* etc */}
</tr>

Upvotes: 1

Related Questions