Ad

Meteor, React, This.props.children Shows Nothing

- 1 answer

I'm using Meteor js and now trying to start using React.

My problem: Only empty space between 'Hello' tags (it should be h1 header 'Test'), what's the problem here?

React.html:

<head>
  <title>react</title>
</head>

<body>
  <div id="hello">
    <Hello>Test</Hello>
  </div>
  <div id="render-target"></div>
</body>

App.jsx:

MainLayout = React.createClass({
  render() {
    return (
      <div>
        <p>main content here..</p>
      </div>
    );
  }
});
Hello = React.createClass({
  render() {
    return (
      <div className="hello">
        <h1>{this.props.children}</h1>
      </div>
    );
  }
});

If i'm replacing {this.props.children} with any string, all working good.

react.jsx:

if (Meteor.isClient) {
  Meteor.startup(function () {
    ReactDOM.render(<MainLayout />, document.getElementById("render-target"));
    ReactDOM.render(<Hello />, document.getElementById("hello"));
  });
}

I'm have only this three files in my root directory.

Ad

Answer

All children components should be rendered by their parent component. In this case, MainLayout is your parent component and Hello is your child component.

React.html:

<head>
  <title>react</title>
</head>

<body>
  <div id="render-target"></div>
</body>

App.jsx:

MainLayout = React.createClass({
  render() {
    return (
      <div>
        <Hello>Test</Hello>
      </div>
    );
  }
});
Hello = React.createClass({
  render() {
    return (
      <div className="hello">
        <h1>{this.props.children}</h1>
      </div>
    );
  }
});

react.jsx:

if (Meteor.isClient) {
  Meteor.startup(function () {
    ReactDOM.render(<MainLayout />, document.getElementById("render-target"));
  });
}
Ad
source: stackoverflow.com
Ad