PushProps

Copy Code<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>

Copy Codeclass App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { direction: "right", index: 1 };
    }

    onClick = () => {
        this.setState({
            index: this.state.index + 1
        });
    }

    onChange = (e) => {
        this.setState({
            direction: e.target.value
        });
    }

    render() {
        const { direction, index } = this.state;

        return (
            <div className="row">
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Push: {direction}
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>

                    <Push direction={direction} stackChildren={true}>
                        <div className="content" key={index}>{index}</div>
                    </Push>
                </div>
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div className="example-config">
                                <label>
                                    <input type="radio" name="direction" value="up" defaultChecked={this.state.direction === 'up'} onClick={this.onChange}/>
                                    &nbsp;Up
                                </label>
                                <br />
                                <label>
                                    <input type="radio" name="direction" value="down" defaultChecked={this.state.direction === 'down'} onClick={this.onChange}/>
                                    &nbsp;Down
                                </label>
                                <br />
                                <label>
                                    <input type="radio" name="direction" value="left" defaultChecked={this.state.direction === 'left'} onClick={this.onChange}/>
                                    &nbsp;Left
                                </label>
                                <br />
                                <label>
                                    <input type="radio" name="direction" value="right" defaultChecked={this.state.direction === 'right'} onClick={this.onChange}/>
                                    &nbsp;Right
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        );
    }
}

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