title: React/Redux, how to get user input
body: <p>i am following the <a href="http://redux.js.org/docs/basics/UsageWithReact.html" rel="noreferrer">usage with React</a> Redux tutorial. Something I really don't get is how to retrieve user input.</p>
  
  <p>They build a FilterLink container, whose mapDispatchToProps is</p>
  
  <pre><code>const mapDispatchToProps = (dispatch, ownProps) =&gt; {
    return {
      onClick: () =&gt; {
        dispatch(setVisibilityFilter(ownProps.filter))
      }
    }
  }
  </code></pre>
  
  <p>So it injects its ownProps.filter to the connected presentational component. If we go and see how this container is construced </p>
  
  <pre><code>const Footer = () =&gt; (
    &lt;p&gt;
      Show:{" "}
      &lt;FilterLink filter="SHOW_ALL"&gt;All&lt;/FilterLink&gt;{", "}
      &lt;FilterLink filter="SHOW_ACTIVE"&gt;Active&lt;/FilterLink&gt;{", "}
      &lt;FilterLink filter="SHOW_COMPLETED"&gt;Completed&lt;/FilterLink&gt;
    &lt;/p&gt;
  )
  </code></pre>
  
  <p>Ok, there is the "filter" property. That's clear.</p>
  
  <p>Now I want to build a text filter on the same example. So first here is my presentational component</p>
  
  <pre><code>const TodoSearch = ({onSubmit}) =&gt; (
      &lt;form
          onSubmit={e =&gt; {
              e.preventDefault()
              onSubmit()
          }}
      &gt;
          &lt;input placeholder="Text search" /&gt;
          &lt;input type="submit" value="Go" /&gt;
      &lt;/form&gt;
  )
  </code></pre>
  
  <p>But when I come to write the container I don't know how to get user input</p>
  
  <pre><code>const mapDispatchToProps = (dispatch) =&gt; {
      return {
          onSubmit: () =&gt; {
              dispatch(setTextSearch(????))
          }
      }
  }
  </code></pre>
  
  <p>It's something I would do with jQuery $(#text).val() but... is it the best way?</p>
  
  <p>Later on on the same tutorial they build a little form to add a todo to the list. Ok, let's go and see how they catch input then.</p>
  
  <pre><code>let AddTodo = ({ dispatch }) =&gt; {
      let input
  
      return (
          &lt;div&gt;
              &lt;form onSubmit={e =&gt; {
                  e.preventDefault()
                  if (!input.value.trim()) {
                      return
                  }
                  dispatch(addTodo(input.value))
                  input.value = ''
               }}&gt;
                   &lt;input ref={node =&gt; {
                       input = node
                   }} /&gt;
                   &lt;button type="submit"&gt;
                      Add Todo
                   &lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Wait, where's the magic here? Did they inject value into "input" variabile with that ref trick? Is that correct?
  So if there were 20 input fields, have I to use 20 variables with 20 different refs?</p>
  
  <p>Any help is appreciate, thank you</p>