Simple reactjs component rendering not valid - Reason?

Question

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?

Could you provide more code? There's nothing wrong here besides class (it should be className). My suggestion is to take a look at the generated code (if using a transpilation process, and not the browser JSX tool). This error raises when: github.com/facebook/react/blob/… — Ciro Costa
– Ciro Costa, Commented Jan 26, 2015 at 22:18
Not sure what more code to provide. The component really is what you see. Changing to className didn't change anything. — flq
– flq, Commented Jan 26, 2015 at 22:26
yep, an error on a property wouldn't raise that error. Did you take a look at the generated code? — Ciro Costa
– Ciro Costa, Commented Jan 26, 2015 at 22:28
It's not clear if this is an artifact of copy/paste but try putting the return statement and the opening paren on the same line. I suspect you are having trouble with an automatically-inserted semicolon. — evan
– evan, Commented Jan 26, 2015 at 22:58
It seems that this is the answer, if you want to put it in as answer I would go on and accept it, as this fixed the issue. — flq
– flq, Commented Jan 27, 2015 at 15:06

Community · Accepted Answer · 2017-05-23 11:50:43Z

1

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.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Feb 23, 2016 at 19:50

flq

23k9 gold badges63 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tornord · Accepted Answer · 2015-12-10 09:55:01Z

0

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

answered Dec 10, 2015 at 9:55

tornord

3554 silver badges9 bronze badges

Comments

Joseph Viscomi · Accepted Answer · 2016-02-22 08:37:58Z

0

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

answered Feb 22, 2016 at 8:37

Joseph Viscomi

311 bronze badge

1 Comment

flq Over a year ago

no, this is not necessary, any react component will do as a root.

Collectives™ on Stack Overflow

Simple reactjs component rendering not valid - Reason?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related