Why does React warn against an contentEditable component having children managed by React?

Question

I get the following warning when rendering my component:

Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

This is my component:

import React, { Component } from "react";

export default class Editable extends Component {
  render() {
    return (
      <div contentEditable={true} onBlur={this.props.handleBlur}>
        {this.props.children}
      </div>
    );
  }
}

What is the potential problem with my code that React wants to warn me about? I did not quite understand from reading the documentation at https://reactjs.org/docs/dom-elements.html.

I imagine that my component should work exactly like an managed input field, without any problem:

1. this.props.children is initial value
2. the onBlur callback updates the props from event.target.innerHTML
3. the component is rendered with the new props

Answer 1

Setting the contenteditable html attribute allows the contents of that element to be modified in the browser. React is warning you that you have children within that element that are managed by React. React only works from the top down. Meaning it manages a model at the top level and maintains a virtual DOM representing that data, then renders the DOM tree based on that virtual DOM. Any changes you make to the DOM outside of React (such as setting contenteditable and allowing the content to be edited by a user directly in the browser) will be potentially blown away or cause problems for React when it goes to update those managed elements.

In your situation you don't care that the {this.props.children} node gets blown away because you know you're catching the changes and doing what you need to with it. It's just warning you that you better not expect that node to remain intact and accurately updated by React when you're letting the content be edited by the browser directly.

If you know what you're doing (and for now it looks like you do) then you can suppress that warning by adding suppressContentEditableWarning={true}.

Answer 2

Thanks @Chev! It fixed the warnings..

      <p
        className={editing ? 'editing' : ''}
        onClick={editOnClick ? this.toggleEdit : undefined}
        contentEditable={editing}
        ref={(domNode) => {
          this.domElm = domNode;
        }}
        onBlur={this.save}
        onKeyDown={this.handleKeyDown}
        {...this.props}
        suppressContentEditableWarning={true}
      >
        {this.props.value}
      </p>