CODEWITHSUNDEEP
javascriptreactjs
Christos Hayward
Christos Hayward

Reputation: 5993

What are appropriate return types for a ReactJS Component.render() function?

The React Tutorial has a render apparently returning an array of rendered nodes:

// tutorial10.js
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

What are acceptable return types for a render() method for a component? An array seems to work? What about an array of arrays? If I have data stored in an array of arrays of codes, how do I appropriately render the grid?

Upvotes: 3

Views: 3025

Answers (2)

Markus-ipse
Markus-ipse

Reputation: 7396

If you check the docs you'll see that you can only return a component or null/false from render.

"The render() method is required. When called, it should examine this.props and this.state and return a single child component. This child component can be either a virtual representation of a native DOM component (such as or React.DOM.div()) or another composite component that you've defined yourself.

You can also return null or false to indicate that you don't want anything rendered. Behind the scenes, React renders a tag to work with our current diffing algorithm. When returning null or false, this.getDOMNode() will return null."

http://facebook.github.io/react/docs/component-specs.html

Upvotes: 1

Nick Tomlin
Nick Tomlin

Reputation: 29261

You must always return a react component, but the contents of that component (as long as they are valid jsx syntax) can be an array, an array of arrays containing react components. E.g.

var MyComponent = React.createClass({
  render: function () {
    var single = <p>Single</p>;
    var array = [
      <p>One</p>,
      [<p>Two</p>],
      [<p>Three</p>]
    ];

    return (
      <div>
        {single}
        {array}
      </div>
    );
  }
});

React.render(<MyComponent />, document.body);

jsbin

Typically you would take the data, iterate over it (however many levels deep) and generate your components. Array.Map and other "functional" helpers are particularly helpful in situations like this.

Upvotes: 3

Related Questions