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

57
votes

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
2
javascriptreactjs
React is warning you against using a potential footgun. If you know how to properly handle the tool so that it doesn't shoot you in the foot, then run with it. If you manage to shoot yourself in the foot, don't be surprised, because you were warned. – zzzzBov
React doesn't know what is contained in this.props.children, it only knows that you can destroy those props. There are consequences for all sorts of things. If there are event subscriptions, they could become memory leaks, if there are bound properties they could become danglers, etc. As zzzBov said, don't shoot yourself in the foot. It doesn't sound like you will, but neither React nor we can know that. – Randy Casburn

2 Answers

111
votes

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

5
votes

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>