title: Rewrite redux dispatch function as component
body: <p>I got a dispatch function to save a name to Redux (Got most code from the redux docs).</p>
  
  <p>But now I want to focus on the input on ComponentDidMount, but my SaveName function isn't a component but a dispatch function. How can I rewrite it so I can use componentDidMount?</p>
  
  <p>My code:</p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import {saveName, feedbackInput} from '../actions/';
  import { withRouter } from 'react-router-dom';
  
  // http://redux.js.org/docs/basics/ExampleTodoList.html
  let SaveName = ({ dispatch }) =&gt; {
  
    let input;
    return(
      &lt;form id="name" onSubmit={e =&gt; {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(saveName(input.value))
          input.value = ''
        }}
      &gt;
        &lt;input type="text"
               name="text"
               onClick={e =&gt; {
                   e.preventDefault()
                   dispatch(feedbackInput(input.value))
                 }}
               onChange={e =&gt; {
                   e.preventDefault()
                   dispatch(feedbackInput(input.value))
                 }}
               ref={
               node =&gt; {
                input = node
                  }
              } /&gt;
        &lt;button className="submit-btn" type="submit"&gt;&lt;/button&gt;
      &lt;/form&gt;
    )
  }
  
  SaveName = withRouter(connect()(SaveName));
  
  export default SaveName;
  </code></pre>