Render components inside other components with react.js

Question

I'm having some trouble figuring out how to render react components, as children inside other components on the serverside. On the client side in my index.js file I'd do something like:

React.render(
  <Panel title="Full Time Score">
    <Graph />
  </Panel>, document.getElementById('column-main') 
);

But on the server side I'm not getting any luck, is it possible to do something like this? or is this some kind of anti-pattern and I should always start off with the one parent component.

What I'm trying to do is have a reusable panel component (it includes a button which toggles visibility) that I can put any content/components inside.

Answer 1

On the server, the markup returned by React.{renderToString,renderToStaticMarkup} is the HTML output of your component on the first render. On the client, components can re-render themselves after their componentDidMount lifecycle method has fired.

Make sure that the Panel component renders its children prop on the first render.

Answer 2

I figured out what I think I should do in the end, or at least what solves my problem. Code:

  var Panel = require('../components/panel.react.jsx');
  var Dataset = require('../components/dataset.probability.react.jsx');

  // Main Column HTML
  var html = React.renderToStaticMarkup(React.DOM.div(null,
    Panel(
      {title:"Title of panel"},

      Graph({data: data})
    ),
    Panel(
      {title:"Title of panel"}

      Graph({data: data})
    ),
    Panel(
      {title:"Title of panel"}

      Graph({data: data})
    )
  ));

  // var html now contains the markup, send it to your template.