React Component that recursively loads other components

0 Views

So, I have a media site built with wordpress that is using react js (something I would not suggest, as wordpress has its own way of doing things that doesn’t always play nice with react). On this site I want to have a sidebar that dynamically loads elements of the sidebar (ads, recommended articles, social media buttons, etc), based on the height of the article that it is beside. These elements are react components themselves. So the way it all works, in my head that is, is the article component gets loaded onto the page first and when done, componentDidMount, it grabs the height of itself and sends it to the sidebar component. How that part happens is not important to my question, but its given to the sidebar component as a prop this.props.data.sidebarHeight). The sidebar then creates itself based on that height. It does so, or it should does so, recursively: if I have this much space left, well then I’ll throw in an ad component, and then subtract the height of the ad component from my height and then check the new height all the way until I have not enough space left to add any more components (see . Bam dynamic sidebar. Here’s my jsx code for the sidebar component: 

var SidebarComponent = React.createClass({

    recursivelyMakeSidebar: function(height, sidebar) {
        // base case
         if (height < 250 ) {
            return sidebar;
        }
        if (height > 600) {
            sidebar = sidebar + <AdvertisementSkyscraper />;
            newHeight = height - 600;
        } else if (height > 250) {
            sidebar = sidebar + <AdvertisementBox />;
            newHeight = height - 250;
        }
        return this.recursivelyMakeSidebar(newHeight, sidebar);
    },

    render: function() {
        sidebarHeight = Math.round(this.props.data.sidebarHeight);
        currentSidebar='';
        sidebar = this.recursivelyMakeSidebar(sidebarHeight, currentSidebar);
            return (
                <div>
                    {sidebar}
                </div>
            )
        }
    }
);

// render component
React.render(
    <SidebarComponent data={dataStore.sidebar} />,
    document.getElementById('mn_sidebar_container')
);

It doesn’t work. It returns [object Object] onto the DOM. Perhaps I don’t understand react enough, but any thoughts on how to do this, if its actually possible, would be great.

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. The fundamental problem here is that you’re concatenating components together as though they were strings of HTML, but they are actually functions. Pushing them into an array as functions will work. I also tweaked some of your compare operators to ‘>=’ in the following example to make sure you don’t get stuck in an endless loop.

    var SidebarComponent = React.createClass({
  recursivelyMakeSidebar: function(height, sidebar) {
    if (height < 250 ) {
        return sidebar;
    }
    if (height >= 600) {
        sidebar.push(<p>600</p>)
        height-=600
    } else if (height >= 250) {
        sidebar.push(<p>250</p>)
        height-=250
    }
    return this.recursivelyMakeSidebar(height, sidebar);
  },
  render:function(){
    var sidebarHeight = Math.round(this.props.data.height);
    var currentSidebar = [];
    var sidebar = this.recursivelyMakeSidebar(sidebarHeight,  currentSidebar)
    return <div>{sidebar}</div>
}
});


var sidebar = {height:900}

// render component
React.render(<SidebarComponent data={sidebar} />, document.body);