"React does not recognize the `blockKey` prop on a DOM element" error when using plugins

Hello. When I create a plugin (I tried Linkify and Hashtag) and connect it to the Editor, everything seems fine, but the moment I insert for example a link into the editor, I get an error:

React does not recognize the blockKey prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase blockkey instead. If you accidentally passed it from a parent component, remove it from the DOM element.

The link in the editor is styled though - like a proper anchor tag: its color is blue, and it’s hoverable.

### My code: … import Editor from “draft-js-plugins-editor”; import createLinkifyPlugin from “draft-js-linkify-plugin”; import “draft-js-linkify-plugin/lib/plugin.css”; … const linkifyPlugin = createLinkifyPlugin(); const plugins = [linkifyPlugin]; … <div className="editor-wrapper" onClick={focusEditor}> <Editor ref={editor} editorState={editorState} onChange={newEditorState => setEditorState(newEditorState)} handleKeyCommand={handleKeyCommand} plugins={plugins} /> </div>

[anders0l]

Hot fix for linkify plugin

import * as R from 'remeda'

...

    this.linkifyPlugin = createLinkifyPlugin({
      target: '_blank',
      component: (params: any) => <a {...R.omit(params, ['blockKey'])} />
    })

For omit you can use lodash, Object.assign() or whatever can clone object and remove prop.

[SirMojo]

Hi,

i had the same problem today. The solution for me was to use older versions of the plugins. (Check for dependency warnings in the console when you install the plugins with npm/yarn)

The following versions work for me:

"draft-js": "^0.10.5",
"draft-js-linkify-plugin": "^2.0.2",
"draft-js-plugins-editor": "^2.1.1",