cannot get Foundation menu to work with reactJS

Question

I cant figure out why the following code wont create the foundation menu for me. Below is the super simplified version of my code:

        var MenuDisplay = React.createClass({

            render: function(){
                console.log("menu display render");
                var menu = (true)?
                <ul className="dropdown menu" data-dropdown-menu>
                            <li>
                                <a id="profile_name">Welcome
                                </a><ul className="menu">
                                    <li>profile</li>
                                    <li className="logout">logout</li>
                                </ul>
                            </li>
                        </ul>
                        : null;
                return(
        <div>
                    {menu}
                    <FoundationPlugin />
                    </div>
                )
            }
        });

        var FoundationPlugin = React.createClass({
            render: function(){
                //applying foundation() the whole document 
                $(document).foundation();
                return(
                    <div></div>
                );
            }
        });

        React.render(
            <MenuDisplay />,
            document.getElementById('myDiv')
        );

• There is nothing wrong with the jsx or html set up, I tested it in 'normal' html and running $().foundation on the menu. It properly display the menu

• the code above works if I apply the .Foundation() after all the code, instead of inside FoundationPlugin component. However I have to do it this way. The reason being that I'm getting data from RestApi first, and that's going to take some time. If I put $().foundation() outside, by the time it hit the $().Foundation(), my component will still havent gotten the data and havent render the proper html tag. I have to run $().foundation only after all the rendering are done.

Answer 1

React components have several lifecycle functions. If you need to wait for rendering to be done, and the actual DOM to be updated, then componentDidMount is what you need.

var MenuDisplay = React.createClass({
  componentDidMount: function(){
    // Do stuff that relies on your DOM being rendered here.
    // Usually anything related to external libs like jQuery etc.
  },
  render: function(){
    ....
    ....
  }
})

Hope this helps.