score:0

i dont use external components.i had the same problem, additionally i used to get the error that i cannot use dangerouslysetinnerhtml if i mark the div as content editable.my approach was similar to yours. so i didnt mark it as content-editable. just dangerouslysetinnerhtml. but in componentdidupdate i used the ref to setattribute of the div as "contenteditable=true". i used the same div to grab the div content to save. this stopped all warnings and errors.

componentdidupdate(){
    this.htmlel.setattribute("contenteditable", true);
}

additionally if your dangerouslysetinnerhtml content contains react components, you can hydrate them to make them functional. but obviously you need to know which component is inside the div to hydrate it.

score:1

when you set contenteditable you're letting the content be modified in the browser.

if you change the dom without react managing behind, react will warn you as this might cause issues when, for example, updating those elements. you are passing {this.props.children} which comes directly from react, using contenteditable will let your content be modified by a user in the browser, thus will might not be the same as react has no control anymore.

you can use suppresscontenteditablewarning={true} to avoid that warning. you either can use react.createelement and pass an argument {contenteditable: true} to avoid the warning (as like https://github.com/lovasoa/react-contenteditable is doing)

score:9

the component you stated is generating component calling react.createelement as follows and thus avoiding the warning:

function contenteditable(props) {
  return react.createelement('div', {contenteditable: true});
}

whereas you are using jsx.

function contenteditable(props) {
  return (<div contenteditable={true}></div>);
}

you can read more here about why react warns you. if you want to suppress the warning you can also use suppresscontenteditablewarning attribute.

function contenteditable(props) {
  return (<div contenteditable={true} suppresscontenteditablewarning={true}></div>);
}

Related Query

More Query from same tag