Reactでinputタグのfocusが外れてしまう

Reactでinputタグを入力しようとすると、入力のたびにフォーカスが外れてしまいました。

問題のコード

<ul>
 {todos.map(todo => (
   <li key={Math.ramdom()} >
    <input type="text" />
   </li>
 ))}
</ul>

原因

配列を展開しているため、配列の長さが変わるたび再レンダリングが起こりkeyの値が変わってしまっていた。

解決法

不変で固定的な数値をkeyに設定する。私はuuidを使用した。

jsの場合

npm install uuid

tsの場合

npm install --save-dev @types/uuid