title: How to access props and state of react-select HOC
body: <p>I'm using <a href="https://github.com/JedWatson/react-select" rel="nofollow noreferrer">react-select v2.0</a> to create a select dropdown with pre-defined items. I have it connected to a Parse query that returns the options with a text search.</p>
  
  <p>My issue is I cannot figure out how to pass the selected value up to the parent component.</p>
  
  <p>The component is named <code>RestaurantSelect</code> and looks like this (abridged):</p>
  
  <pre><code>import React, { Component } from 'react'
  import AsyncSelect from 'react-select/lib/Async'
  
  type State = {
    inputValue: string
  }
  
  const filterRestaurants = (inputValue: string) =&gt; {
    return (
      // ... results from Parse query (this works fine)
    )
  }
  
  const promiseOptions = inputValue =&gt; (
    new Promise(resolve =&gt; {
      resolve(filterRestaurants(inputValue))
    })
  )
  
  export default class WithPromises extends Component&lt;*, State&gt; {
    state = { inputValue: '' }
  
    handleInputChange = (newValue: string) =&gt; {
      const inputValue = newValue.replace(/\W/g, '')
      this.setState({ inputValue })
      return inputValue
    }
  
    render() {
      return (
        &lt;AsyncSelect
          className="select-add-user-restaurant"
          cacheOptions
          defaultOptions
          placeholder="Start typing to select restaurant"
          loadOptions={promiseOptions}
        /&gt;
      )
    }
  }
  </code></pre>
  
  <p>The parent component that calls <code>RestaurantSelect</code> looks like this:</p>
  
  <pre><code>import React from 'react'
  import RestaurantSelect from './RestaurantSelect'
  
  class AddUserRestaurant extends React.Component {
    constructor() {
      super()
  
      this.state = {
        name: ''
      }
    }
  
    addUserRestaurant(event) {
      event.preventDefault()
  
      // NEED INPUT VALUE HERE!
    }
  
    render() {
      return (
        &lt;form onSubmit={(e) =&gt; this.addUserRestaurant(e)}&gt;
  
          &lt;RestaurantSelect /&gt;
  
          &lt;button type="submit"&gt;Add&lt;/button&gt;
        &lt;/form&gt;
      )
    }
  }
  
  export default AddUserRestaurant
  </code></pre>
  
  <p>If I inspect the component I can see the input <code>value</code> attribute match the typed text, but when a value is selected from the dropdown it disappears (i.e. goes from <code>&lt;input value="Typed name" /&gt;</code> to <code>&lt;input value /&gt;</code>. A separate <code>&lt;span&gt;</code> element appears with the value of the label, but I don't want to have to grab that from the DOM, that doesn't seem to be the intended method.</p>
  
  <p>If I search the React console tab for my component, <code>RestaurantSelect</code> nothing is found:</p>
  
  <p><a href="https://i.stack.imgur.com/A0Prh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A0Prh.png" alt="Blank results for component search"></a></p>
  
  <p>But, if I search for Select, it appears and has <code>props</code> and <code>state</code> that have the selected value ("Time 4 Thai" in this case):</p>
  
  <p><a href="https://i.stack.imgur.com/AcwlF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AcwlF.png" alt="Component result with props and state"></a></p>
  
  <p>However, <code>console.log(this.state)</code> in RestaurantSelect shows only the <code>inputValue</code>, nothing from <code>&lt;Select/&gt;</code></p>
  
  <p>Is there a way to access the <code>props</code> and <code>state</code> of the higher order component?</p>