title: How to add context to recompose's withHandlers()?
body: <p><code>recompose</code> has this function called <a href="https://github.com/acdlite/recompose/blob/master/docs/API.md#withhandlers" rel="nofollow noreferrer"><code>withHandlers</code></a> that lets you define an event handler while keeping your component pure.</p>
  
  <p>e.g. if you had something like this inside you <code>render()</code> method:</p>
  
  <pre><code>&lt;TextInput value={value} onChange={ev =&gt; this.handleChange(ev.target.value)} /&gt;
  </code></pre>
  
  <p>it wouldn't be pure because every time your component renders, it'd by passing a different <code>onChange</code> function to your <code>TextInput</code> component.</p>
  
  <p>This is great, but how can this be extended to support arrays of inputs? Or otherwise provide auxiliary data? </p>
  
  <p>e.g. taking their example and extending it a bit:</p>
  
  <pre><code>const enhance = compose(
      withState('values', 'updateValue', ''),
      withHandlers({
          onChange: props =&gt; inputName =&gt; event =&gt; {
              props.updateValue(inputName, event.target.value)
          },
          onSubmit: props =&gt; event =&gt; {
              event.preventDefault();
              submitForm(props.value)
          }
      })
  )
  
  const Form = enhance(({ value, onChange, onSubmit, inputs }) =&gt;
      &lt;form onSubmit={onSubmit}&gt;
          &lt;label&gt;Value
              {inputs.map(input =&gt; (
                  &lt;TextInput value={value} onChange={onChange(input)} /&gt;    
              ))}
          &lt;/label&gt;
      &lt;/form&gt;
  )
  </code></pre>
  
  <p>I've fudged the details a bit, but pretend <code>inputs</code> comes in as an array of input names. e.g. <code>["firstName","lastName"]</code> would render two textboxes, one for each.</p>
  
  <p>I want to store the values for each of these in my state, but I don't want to define separate updater functions for each. Thus I need to attach some metadata to the <code>onChange={...}</code> prop so that I know which field I'm updating in my state.</p>
  
  <p>How can I do that? </p>
  
  <p>In my example I wrote <code>onChange(input)</code> and added an extra 'level' to the <code>withHandlers.onChange</code> function to accept the extra argument, but <code>withHandlers</code> doesn't actually work that way. Is there some way to do this -- i.e., ensure that each <code>TextInput</code> receives the same function instance every time <code>&lt;Form&gt;</code> is rendered?</p>