How to update the component outside of the React application?

[thevarunraja]

If I want to re-render the component on a button click how can I do that? What if content loaded dynamically and I needed to init react after an ajax call. Any help appreciated.

[jennasalau]

Hey Varan,

You raise a good point, dynamic containers is something that has been in the back log for a little while.

Currently the only way to do this is by disposing of your container and re-setting it when you load in new HTML dynamically. You could set up a utility method on the Bootstrapper to do this for you.

For example

1. Assign container to a property this.container
2. Create a reset method as below

class MyApp extends ReactHabitat.Bootstrapper {
    constructor(){
        super();

        // Create a new container builder
        this.container = new ReactHabitat.Container();

        // Register your top level component(s) (ie mini/child apps)
        this.container.register('SomeReactComponent', SomeReactComponent);
        this.container.register('AnotherReactComponent', AnotherReactComponent);

        // Finally, set the container
        this.setContainer(this.container);
    }

    reset() {
        this.dispose();
        this.setContainer(this.container);
    }
}

3. Somewhere else in your app

loadSomeHtml.then((html) => {
     document.body.getElementById("target").innerHTML = html;
     MyApp.reset();
});

While this will work, its not ideal breaking down components then standing them up again. This should only be considered a temporary work around.

In the mean time, I will leave this issue open until this feature is supported within the framework itself.

Thanks, Jenna

[jennasalau]

This is now available in v0.5.0

https://github.com/DeloitteDigitalAPAC/react-habitat#dynamic-updates