From 2b8237415fd878ced106d694a191307aa647a1a5 Mon Sep 17 00:00:00 2001
From: Anthony Barone <abarone@twitter.com>
Date: Fri, 5 Aug 2016 10:51:20 -0400
Subject: [PATCH] Update demo components to be compatible with React 15.2 and
 up

---
 demo/components/box.jsx       | 6 +++++-
 demo/examples/toggle-box.jsx  | 2 +-
 demo/examples/trigger-box.jsx | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/demo/components/box.jsx b/demo/components/box.jsx
index 39488fe..74d179b 100644
--- a/demo/components/box.jsx
+++ b/demo/components/box.jsx
@@ -1,3 +1,4 @@
+var _ = require('lodash');
 var React = require('react');
 
 require('../css/polyfill.css');
@@ -51,11 +52,14 @@ var Box = React.createClass({
       opacity: 0.4,
     };
 
+    // Pass any props that are not our own on through.
+    var restProps = _.omit(this.props, _.keys(this.constructor.propTypes));
+
     // outer div below absorbs Velocity's display: block behavior, keeping it from overwriting
     // the display: flex
     return (
       <div style={{margin: 10}}>
-        <div {...this.props} className="flex-box flex-column justify-content-center align-items-center user-select-none" style={style}>
+        <div {...restProps} className="flex-box flex-column justify-content-center align-items-center user-select-none" style={style}>
           {this.props.children}
           {this.props.instruction ? <div style={instructionStyle}>{this.props.instruction}</div> : null}
         </div>
diff --git a/demo/examples/toggle-box.jsx b/demo/examples/toggle-box.jsx
index 8cf3817..e3a433f 100644
--- a/demo/examples/toggle-box.jsx
+++ b/demo/examples/toggle-box.jsx
@@ -87,7 +87,7 @@ var ToggleBox = React.createClass({
     return (
       <div className="flex-box flex-column flex-1 align-items-center">
         <div>
-          <select rvalue={this.state.effect} onChange={this.whenSelectChanged}>{this.renderEffects()}</select>
+          <select value={this.state.effect} onChange={this.whenSelectChanged}>{this.renderEffects()}</select>
         </div>
         <Box className="flex-1 flex-box flex-column align-items-center" style={{backgroundColor: '#f5f5f5'}} onClick={this.whenToggleClicked} instruction="Click!">
           {/*
diff --git a/demo/examples/trigger-box.jsx b/demo/examples/trigger-box.jsx
index d8e948a..25e90a3 100644
--- a/demo/examples/trigger-box.jsx
+++ b/demo/examples/trigger-box.jsx
@@ -57,7 +57,7 @@ var TriggerBox = React.createClass({
     return (
       <div className="flex-box flex-column flex-1 align-items-center">
         <div>
-          <select rvalue={this.state.effect} onChange={this.whenSelectChanged}>{this.renderEffects()}</select>
+          <select value={this.state.effect} onChange={this.whenSelectChanged}>{this.renderEffects()}</select>
         </div>
         <div className="flex-1">
           {/*