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

[angithub13]

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>

[angithub13]

Still have this problem. If somebody could help, I would greatly appreciate it.

[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",

[angithub13]

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",

Thank you :) I thought about it, but wanted to find a solution for the latest version. I'll probably follow your advice.

[angithub13]

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",

I did what you did as well and that error disappeared. However, when I'm restoring the state in a component where I'm only displaying the submitted message, the link isn't hoverable, though it's hoverable when I put it in the editor. Do you know why it might not woriking?

Also, I still have this warning:
react-dom.development.js:12466 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
...
Please update the following components: PluginEditor (and DraftEditor as well in another warning)

[r3vsan]

Hello, i've got the same problem:

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.

when writing hashtags inside the html text using draft-js-hashtag-plugin 2.0.4

[f4810]

This is a possible patch for file draft-js-hashtag-plugin/lib/Hashtag/index.js ...
and for draft-js-linkify-plugin/lib/Link/index.js too.

hashtag_patch.txt

[angithub13]

This is a possible patch for file draft-js-hashtag-plugin/lib/Hashtag/index.js ...
and for draft-js-linkify-plugin/lib/Link/index.js too.

hashtag_patch.txt

Oh wow! Can you please give a code example of it? I'm not really sure how to use it.

[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.

[philohelp]

I incorporated the plugin to my codebase and then in the end of Link/index.js I added :

    const patchedProps = _.omit(props, ["blockKey"]);

    return component ? (
      React.createElement(component, patchedProps)
    ) : (
      <a {...patchedProps} /> // eslint-disable-line jsx-a11y/anchor-has-content
    );

Error has gone away.