現在公開中のデザイン＆コーディングツールお道具箱をNext.js/TypeScriptで絶賛リプレイス中なのですが、コードを表示する部分でちょっと詰まりました。

エラー内容

コンソールにてWarningが出ていました。

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.

要約：おいおいおめーさん、contentEditableしてるけどほんまにええんか？わいは知らんで。

状況

問題のコードはこちらです。

contentEditable属性を利用することによって、div要素でもinput要素みたいにテキストを自由に編集することができるようになるのですが、それを使用したことによって警告がでるようになりました。

<div contentEditable spellCheck={false}>
  <SyntaxHighlighter language="htmlbars" style={monokaiSublime}>
    {codeString}
  </SyntaxHighlighter>
</div>

対策

公式によると

子要素を持つ要素に contentEditable 属性が付与されている場合、それは動作しないため通常は警告が出力されます。

React – suppressContentEditableWarning

とのことで警告が出ていたらしいのでsuppressContentEditableWarningを挿入します。

<div
  contentEditable
  suppressContentEditableWarning={true}
  spellCheck={false}
>
  <SyntaxHighlighter language="htmlbars" style={monokaiSublime}>
    {codeString}
  </SyntaxHighlighter>
</div>

これで解消されました。