import {Motion} from 'react-motion';
import React, {Component} from 'react';

class SceneNavigator extends Component{
    constructor(props) {
        super(props);
        var {state, data, url} = props.stateNavigator.stateContext;
        this.state = {scenes: {[url]: state.renderScene(data)}};
    }
    componentDidMount() {
        var {stateNavigator} = this.props;
        stateNavigator.onNavigate((oldState, state, data, asyncData) => {
            this.setState((prevState) => {
                var {url, crumbs} = stateNavigator.stateContext;
                var scenes = {[url]: state.renderScene(data, asyncData)};
                for(var i = 0; i < crumbs.length; i++) {
                    scenes[crumbs[i].url] = prevState.scenes[crumbs[i].url]; 
                }
                return {scenes};
            });
        });
    }
    render() {
        var {oldState, state, data, url, crumbs} = this.props.stateNavigator.stateContext;
        var {getDefaultStyle, getStyle, interpolateStyle} = this.props;
        var scenes = crumbs.concat({state, data, url, show: true})
            .map(({state, data, url, show}) =>
                <Motion key={url} defaultStyle={getDefaultStyle(state, data)}
                    style={getStyle(!!show, state, data)}>
                    {(interpolatingStyle) => 
                        <div style={interpolateStyle(interpolatingStyle, !!show, state, data)}>
                            {this.state.scenes[url]}
                        </div>
                    }
                </Motion>);
        return <div>{scenes}</div>;
    }
}

export default SceneNavigator;

@@ -1047,16 +1047,69 @@
 = crumbs
+.map(crumb =%3E (%7B...crumb, show: false%7D))%0A            
 .concat(
@@ -1301,18 +1301,16 @@
 etStyle(
-!!
 show, st
@@ -1445,10 +1445,8 @@
 le, 
-!!
 show

Set show to avoid falsy value