React_on_rails: Nesting components

[joeczucha]

I'm trying to nest components as described in the React docs

We recommend that such components use the special children prop to pass children elements directly into their output:

With components Box, BoxHeader, etc... I've tried this in my template:

<%= react_component("Box", props: {
  title: "My new box"
}) do %>
<%= react_component("BoxHeader", props: {
  title: "My new box"
}) %>
<% end %>

and in my JSX:

import React, { PropTypes } from 'react';

export default class Box extends React.Component {

  static propTypes = {
    children: PropTypes.node,
  };

  constructor(props, _railsContext) {
    super(props);
    this.state = {
      children: this.props.children,
    };
  }

  render() {
    return (
      <div className="box">
        { this.state.children }
      </div>
    );
  }
}

but only the box component is rendered. I also tried including the second component in the render function of the first element:

  render() {
    return (
      <div className="box">
        <BoxHeader title="test" />
      </div>
    );
  }

but I get the following error:

Uncaught ReferenceError: ReactOnRails encountered an error while rendering component: Box.Original message: BoxHeader is not defined

Including the two components separately works as expected:

<%= react_component("Box", props: {
  title: "My new box"
}) %>
<%= react_component("BoxHeader", props: {
  title: "My new box"
}) %>

So I think that everything is included properly. Is there a pattern that I should be using for this?

Thanks in advance :)

[justin808]

I've never considered nesting components in the Ruby code. I recommend nesting in the React code.

If you need more help, get in touch with me directly. Since this is not related to react on rails, I'm closing this issue.

[justin808]

BoxHeader is not defined

You need to import it.

[jplaut]

A bit confused. Passing children to a React component is a fundamental feature of React that is utilized by numerous 3rd party libraries. Thus, when creating a helper method to render React components, how is it not vital to allow passing in children? Is this already implemented and I'm just missing it? This seems like a pretty important feature to me.

[filipesperandio]

Was there any moves into being able to render nested components from the react_component helper?

[RonWalker22]

Any updates?

[Kukunin]

I was able to work around the nested components for the simplest case, like this:

<%= nested_react_component("Title", props: { size: 2 }) do %>
    My Content
<% end %>

To have this, put the method to app/helpers/react_helper.rb:

module ReactHelper
  def nested_react_component(component, opts, &block)
    children = capture(&block)
    props = opts.fetch(:props, {}).merge(children: children)
    react_component(component, opts.merge(props: props))
  end
end

It's still doesn't solve the problem because it doesn't support nested HTML, so

<%= nested_react_component("Title", props: { size: 2 }) do %>
    <b>My Content</b>
<% end %>

renders literal escaped HTML.

It seems it's original issue with react_component because this doesn't work neither:

<%= react_component("Title", props: { size: 2, children: '<b>My Content</b>' }) %>