Yaswanth
Yaswanth

Reputation: 89

How to Render Mutliple tr Rows in React

I am stuck with this, when i am running the code is get this error.

Uncaught Error: Invariant Violation: findComponentRoot(..., .0):
Unable to find element. This probably means the DOM was unexpectedly
mutated (e.g., by the browser), usually due to forgetting a <tbody>
when using tables, nesting tags like <form>, <p>, or <a>, or using
non-SVG elements in an <svg> parent. Try inspecting the child nodes of
the element with React ID ``.

Please help me to solve this.

var TicketsList = React.createClass({
            render: function() {
                var TicketNodes = this.props.data.map(function (ticket){
                    return(
                        <tr>
                            <td className="txt-c">
                                <span className="pr-5 f-18" title="Responses">
                                    <span>{ticket.responses}</span>
                                    <i className="fa fa-comments-o"></i> 
                                </span>
                                <span className="pr-5 f-18" title="Attachments">
                                    <span>{ticket.attachments}</span>
                                    <i className="fa fa-paperclip"></i> 
                                </span>
                            </td>
                            <td>{ticket.message}</td>
                            <td>{ticket.recorded_support_type}</td>
                            <td>{ticket.recorded_sub_type}</td>
                            <td>{ticket.recorded_priority}</td>
                            <td>{ticket.recorded_status}</td>
                            <td>{ticket.submitted_by_name}</td>
                            <td>{ticket.assigned_to}</td>
                        </tr>
                    );
                });
                return (
                    <tbody>
                        {TicketNodes}
                    </tbody>
                );
            }
        });

Upvotes: 1

Views: 739

Answers (1)

Anders Ekdahl
Anders Ekdahl

Reputation: 22933

Are you wrapping that contents with a <table> somewhere else? A <tbody> element should always be wrapped in a <table> element.

Upvotes: 1

Related Questions