Alter ReactJS child components after transpiling (client side)?

Question

With ReactJS, you can create a component using other components like so:

<MyComponent>
  <Calendar />
  <ProfilePic />
</MyComponent>

So in this case, MyComponent is sort of like a layout container, with two children components that are in a certain order in the resulting HTML.

What do you do if the order of the children components in MyComponent needs to change on the client side? This is fairly easy to do on the server side before transpiling, but once the code as been sent to the browser, the components have already been transpiled into JS at this point...

Do you pass the children components as properties and just define their "order" they show up in the <MyComponent> layout in properties as well? For example, maybe some control/widget on the page alters the order of the children components so that <ProfilePic> is now before <Calendar> in the HTML.

What is the best approach to this problem?

Not sure I understand. Do you want to dynamically change the order of children at runtime? — Felix Kling
Yes, in the browser, on the client side. Sorry I am not being clear maybe. Not sure if you transpile the components all individually and somehow pass them in as children into the MyComponent component or how you go about doing that... — Jake Wilson

Dhaval Patel Dhaval Patel · Accepted Answer · 2015-11-18T07:48:27

Yes You can do it for that you have to do some code changes like you have to create a CustomeComponent which can decide at runtime which component should be loaded at runtime like your CustomeComponent look like

var Custome=React.createClass({

var InputComponentName=this.props.input;

render:function(){

return(
  <InputComponentName />
 )
}
});

now from parent component you have to call the Component like

<MyComponent>
 <Custome input="Calender" />
</MyComponent>

in above mentioned code you can do the logic like sequence no and based on sequence it will render.

Alter ReactJS child components after transpiling (client side)?

1 Answers