title: Custom Field with Class component Formik
body: <p>I'm using Formik as library to handle my form value. I'm trying to use a custom component as Field, my parent component looks like:</p>
  
  <pre><code>        &lt;Formik
              onSubmit={(values) =&gt; {
                  console.log(values);
              }}
          &gt;{({values}) =&gt; (
              &lt;div className="card-wrapper"&gt;
                  &lt;Form&gt; 
                     &lt;div className="row"&gt;
                         {group.elements.length ? (
                             group.elements.map((item,i) =&gt; {
                                    return (
                                      &lt;div key={i} className="col-12 col-sm-6 col-md-6 col-lg-4"&gt;
                                             &lt;Field type="range" component={LevelSelector} name={item.name.trim()} /&gt;
                                      &lt;/div&gt;
                                    )
                             })
                          ): ""} 
                    &lt;div className="btn-container"&gt;
                        &lt;Input type="submit" className="btn btn-primary" value="Save"&gt;&lt;/Input&gt;               
                    &lt;/div&gt;
                  &lt;/Form&gt;
              &lt;/div&gt;
          )}
          &lt;/Formik&gt;
  </code></pre>
  
  <p>my custom component is a class component and not a function component. The documentation (<a href="https://jaredpalmer.com/formik/docs/api/field" rel="nofollow noreferrer">https://jaredpalmer.com/formik/docs/api/field</a>) shows me as could be implemented as function component but not as class component.</p>
  
  <p>My render function looks like this:</p>
  
  <pre><code>render() {
      return(
      &lt;&gt;
          {
              ({
                  field,
                  form,
                  ...props
              }) =&gt; {
                  return(
                      &lt;&gt; 
                          &lt;Label for="exampleSelect"&gt;{this.props.name}: &lt;/Label&gt;
                          &lt;p&gt;&lt;i&gt;{this.state.levelLabel}&lt;/i&gt;&lt;/p&gt;
                          &lt;Input {...field} {...props} onChange={this.handleChange} /&gt;
                      &lt;/&gt;
                  );
              }
          }
      &lt;/&gt;
      );
  </code></pre>
  
  <p>I've tried to return function similar to the described in the documentation but not success. </p>
  
  <p>Is there a way to implement custom field as class component?</p>
  
  <p>Any helps will be highly appreciated. </p>