Respond "Invariant Violation" when rendering a table

Question

I get the following error when trying to add a property onClickto an element <td>inside a table. Here is my mistake:

Invariant violation: findComponentRoot (...) ... Could not find the element. This probably means that the DOM mutated unexpectedly (for example, by the browser), usually due to forgetting <tbody> when using tables, nested tags, such as ... or using elements other than SVG in the <svg> parent . Try checking the child nodes of the element with the React ID.

I read several variants of the same problem, but most of the problems arise due to the incorrect structure of the table. My table is structured correctly. Here is my complete function:

render() {
    return (
        <table className="table table-hover">
            <thead>
                <tr>
                    <th>Field</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                {Object.keys(user).map(function(key) {
                    let val = user[key];
                    if (typeof val === 'string') {
                        return (
                            <tr key={user[key]}>
                                <th>{key}</th>
                                <td onClick={this.handleClick}>{val}</td>
                            </tr>
                        )
                    }
                }, this)}
            </tbody>
        </table>
    )
}

, onClick, .

?

Answer 1

, user[key] <tr>. , React . <tr key={i}> . , - , , , - .