Tengo div contenteditable en React

{amp}lt;div className="comment-body" onKeyDown={addToken} onBlur={addComment} contentEditable data-text="Enter text here" {amp}gt; {renderComments()} {amp}lt;/div{amp}gt; 

Para un método, agrego un nuevo nodo al div y renderizo una nueva matriz de texto y este nodo, pero en el div tengo duplicados . ¿Cómo puede esto ser evitado? si uso e.target.innerHTML = », entonces cómo asegurarme de que el div se borre primero y solo luego se represente la nueva matriz.

agregue una condición en el código: cuando div está vacío, luego se agrega una clase, luego se representa la nueva matriz, si se agrega la clase, asegúrese de que div se borre primero y luego se represente la nueva matriz

Debe usar Ref en lugar de cambios directos para borrar el div.

  {amp}lt;div className="comment-body" ref={(ref) ={amp}gt; { this.commentref = ref; }} onKeyDown={addToken} onBlur={addComment} contentEditable data-text="Enter text here" {amp}gt; {renderComments()} {amp}lt;/div{amp}gt; 

Luego debe borrar el div después de agregar el nuevo.