Updating examples to use new value prop

Author: CMTegner

examples/async-data/app.js

@@ -6,6 +6,7 @@ let App = React.createClass({
 
   getInitialState () {
     return {
+      value: '',
       unitedStates: getStates(),
       loading: false
     }
@@ -25,16 +26,17 @@ let App = React.createClass({
 
         <Autocomplete
           ref="autocomplete"
+          value={this.state.value}
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}
           onSelect={(value, item) => {
             // set the menu to only the selected item
-            this.setState({ unitedStates: [ item ] })
+            this.setState({ value, unitedStates: [ item ] })
             // or you could reset it to a default list again
             // this.setState({ unitedStates: getStates() })
           }}
           onChange={(event, value) => {
-            this.setState({loading: true})
+            this.setState({ value, loading: true })
             fakeRequest(value, (items) => {
               this.setState({ unitedStates: items, loading: false })
             })

examples/custom-menu/app.js

@@ -6,6 +6,7 @@ let App = React.createClass({
 
   getInitialState () {
     return {
+      value: '',
       unitedStates: getStates(),
       loading: false
     }
@@ -21,11 +22,12 @@ let App = React.createClass({
           letter of the alphabet.
         </p>
         <Autocomplete
+          value={this.state.value}
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}
-          onSelect={() => this.setState({ unitedStates: [] }) }
+          onSelect={value => this.setState({ value, unitedStates: [] }) }
           onChange={(event, value) => {
-            this.setState({loading: true})
+            this.setState({ value, loading: true })
             fakeRequest(value, (items) => {
               this.setState({ unitedStates: items, loading: false })
             })

examples/static-data/app.js

@@ -3,6 +3,9 @@ import { getStates, matchStateToTerm, sortStates, styles } from '../utils'
 import Autocomplete from '../../lib/index'
 
 let App = React.createClass({
+  getInitialState() {
+    return { value: 'Ma' }
+  },
   render () {
     return (
       <div>
@@ -14,11 +17,13 @@ let App = React.createClass({
         </p>
 
         <Autocomplete
-          initialValue="Ma"
+          value={this.state.value}
           items={getStates()}
           getItemValue={(item) => item.name}
           shouldItemRender={matchStateToTerm}
           sortItems={sortStates}
+          onChange={(event, value) => this.setState({ value })}
+          onSelect={value => this.setState({ value })}
           renderItem={(item, isHighlighted) => (
             <div
               style={isHighlighted ? styles.highlightedItem : styles.item}