title: use formik on react-draft-wysiwyg
body: <p>I am using <code>formik</code> for my forms. I wanted to implement <code>react-draft-wysiwyg</code> editor with formik. However, I found following warning in my case.</p>
  
  <pre><code>Warning: Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input:
  </code></pre>
  
  <p>Because of which I think, I cannot show error if it has validation issue and also the state is not preserved if i move to next form and come back to the form where I have put content on the editor. </p>
  
  <p>Is that the warning responsible for those issues or I have missed something important?</p>
  
  <p>Here is how I am trying to bind <code>formik</code> with <code>react-draft-wysiwyg</code></p>
  
  <pre><code>import React from "react";
  import styled from "styled-components";
  import { Editor } from "react-draft-wysiwyg";
  import htmlToDraft from "html-to-draftjs";
  import draftToHtml from "draftjs-to-html";
  import { EditorState, convertToRaw, ContentState } from "draft-js";
  
  import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
  
  const EditorField = ({
    input,
    meta,
    field,
    form,
    label,
    placeholder,
    labelCss
  }) =&gt; {
    const [active, setActive] = React.useState();
    const [editorState, setEditorState] = React.useState(
      EditorState.createEmpty()
    );
    React.useEffect(() =&gt; {
      if (form.dirty) {
        return;
      }
      if (!field.value) {
        return;
      }
      const contentBlock = htmlToDraft(field.value);
      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(
          contentBlock.contentBlocks
        );
        const editorState = EditorState.createWithContent(contentState);
        setEditorState(editorState);
      }
    }, [field.value, form.dirty]);
  
    const onEditorStateChange = editorState =&gt; {
      changeValue(editorState);
    };
  
    const changeValue = editorState =&gt; {
      setEditorState(editorState);
      form.setFieldValue(
        field.name,
        draftToHtml(convertToRaw(editorState.getCurrentContent()))
      );
    };
    const hasError = form.touched[field.name] &amp;&amp; form.errors[field.name];
    return (
      &lt;&gt;
        &lt;Wrapper&gt;
          {label &amp;&amp; (
            &lt;Label isActive={active} css={labelCss}&gt;
              {label}
            &lt;/Label&gt;
          )}
          &lt;Editor
            editorState={editorState}
            wrapperClassName="wrapper-class"
            editorClassName="editor-class"
            toolbarClassName="toolbar-class"
            onEditorStateChange={editorState =&gt; onEditorStateChange(editorState)}
            placeholder={placeholder}
            toolbar={{
              options: [
                "inline",
                "blockType",
                "fontSize",
                "fontFamily",
                "list",
                "textAlign",
                "link",
                "embedded",
                "remove",
                "history"
              ]
            }}
            name={field.name}
            id={field.name}
            onFocus={() =&gt; setActive(true)}
            onBlur={e =&gt; {
              setActive(false);
              field.onBlur(e);
            }}
          /&gt;
          {!!hasError &amp;&amp; &lt;Error&gt;{hasError}&lt;/Error&gt;}
        &lt;/Wrapper&gt;
      &lt;/&gt;
    );
  };
  
  export default EditorField;
  
  const Wrapper = styled.div``;
  </code></pre>
  
  <p>When rendering the form I am doing the follow</p>
  
  <pre><code>&lt;Field
      component={EditorField}
      name="article"
      label="Write an article"
      placeholder="content here"
  /&gt;
  </code></pre>
  
  <p>The data I get from server is shown on the editor though.</p>