CODEWITHSUNDEEP
javascriptreactjs
flq
flq

Reputation: 22859

Simple reactjs component rendering not valid - Reason?

I am trying to render a very simple table with react, but it complains bitterly:

"Invariant Violation: Table.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object."

Here's the definition:

var Table = React.createClass({

  render: function() {
    return 
    (<table class="table table-striped">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>One</td>
          <td>Two</td>
        </tr>
        <tr>
          <td>One</td>
          <td>Two</td>
        </tr>
      </tbody>
    </table>);
  }
});

It is a single element returned, the HTML is valid, so I am not sure what the problem is. Does anybody know what is the issue?

Upvotes: 1

Views: 612

Answers (3)

flq
flq

Reputation: 22859

Hat-tip to evan, who actually provided the answer in the comments.

I simply got tripped by the "auto"-insertion of semicolons by Javascript. The single return statement meant to return from the function, giving it a return value of undefined. the following jsx never got executed.

Starting the jsx on the same line as the return ensures that the return is executed as intended.

Upvotes: 1

Joseph Viscomi
Joseph Viscomi

Reputation: 31

The return from your render method needs to nest everything under a single <div> tag.

Upvotes: 0

tornord
tornord

Reputation: 345

This is a babel compilation problem. Put html-code on its own lines.
return ( Header 1 Header 2 One Two One Two );

And change class to className

Upvotes: 0

Related Questions