Exiting Child Components

While an exiting child component is rendered because it still exists in the React Virtual DOM, it is no longer available in the DOM.

To apply reactive updates to an exiting child element, pass a childFactory function. The function controls the entering and exiting child components based on the provided props.

<style>
.content {
  width: 100px;
  padding: 10px;
  color: #787878;
  background-color: #fcf7f8;
  font-size: 13px;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  border: 1px solid rgba(0,0,0,.05);
}
</style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        const childFactory = (child) => {
            if(!child.props.in){
                return React.cloneElement(child, {
                    ...child.props,
                    children: (<div className="content">JUST CHANGED!</div>)
                });
            }

            return child;
        }

        return (
            <div className="example">
                <div>
                    <dl>
                        <dt>
                            Slide:
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>

                    <Slide
                        childFactory={childFactory}
                        transitionExitDuration={1500}
                    >
                        {children}
                    </Slide>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /