title: React - onChange event for contentEditable attribute
body: <p>I want to use <code>  &lt;div onInput={onChange} contentEditable&gt;</code> to save user input like textarea does.
  I've heard that I need to use onInput listener to trigger fn when input change.
  The problem is  when I update text with React state, It moves the caret to beginning of text constantly</p>
  <p>this is my code</p>
  <pre><code>import React from &quot;react&quot;;
  
  const App = () =&gt; {
    const [value, setValue] = React.useState(&quot;I am edittable&quot;);
    const onChange = (e) =&gt; {
      const html = e.target.innerHTML;
      setValue(html);
    };
  
    return (
      &lt;div onInput={onChange} contentEditable&gt;
        {value}
      &lt;/div&gt;
    );
  };
  export default App;
  </code></pre>
  <p>codesandbox
  <a href="https://codesandbox.io/s/react-editable-cell-pwil6?file=/src/App.js:0-310" rel="nofollow noreferrer">https://codesandbox.io/s/react-editable-cell-pwil6?file=/src/App.js:0-310</a></p>
  <p>how could I fix it ?</p>