Render Inner Component in a Custom DOM Node in Reactjs

Question

Consider the following Component hierarchy:

var FundComponent = React.createClass({
    render : function() {
      return (
        <div>
        <UserComponent profile={data} />
        </div>
        );
    }
  });

var UserComponent = React.createClass({
    render : function() {
      return (
        <div>
        Some Stuff goes here
        </div>
        );
    }
  });

React.renderComponent(<FundComponent />, document.getElementById('fund'));

This will render UserComponent inside the #fund node in my HTML.

How can I render UserComponent in a specific node inside the fund node in my HTML ? eg:

<div id="fund">
<div id="otherStuff">Stuff</div>
<div id="user">**load UserComponentHere**</div>
</div>

myusuf · Accepted Answer · 2014-04-30 07:39:03Z

After reading around a bit, I found out how to go about this. Feel free to correct me.

React has a different concept as to how to go about this.

Rather than pre-defining the html in the html file, we define it in the render function, like so:

var FundComponent = React.createClass({
    render : function() {
      return (
        <div>
          <div className="myOtherStuff1">
            <OtherComponent1 data={data} />  //other stuff
          </div>
          <div className="user">  //user
            <UserComponent profile={profile} />
          </div>
          <div className="myOtherStuff2">
            //can have component or other static stuff. Upto developer.
          </div>
          ...
        </div>
      );
    }
  });

React.renderComponent(<FundComponent />, document.getElementById('fund'));

And the html will be: <div id="fund"></div>

And then, we can define UserComponent and OtherComponent(s) as we go.

Sophie Alpert · Accepted Answer · 2014-04-29 15:28:02Z

0

I may be misunderstanding you, but you should simply be able to do:

React.renderComponent(<FundComponent />, document.getElementById('user'));

to render into the #user div.

answered Apr 29, 2014 at 15:28

Sophie Alpert

144k37 gold badges229 silver badges244 bronze badges

1 Comment

myusuf Over a year ago

What if Fund component holds other components too ? And each needs to be in a different node within Fund component ?

Collectives™ on Stack Overflow

Render Inner Component in a Custom DOM Node in Reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related