ReactJack SetStateを使用してHTMLのリストを繰り返します(短いチュートリアル)

やあ、namaste.
reactjsとの時間を費やした後、私は私のreactjs問題を修正するためにコードを得た後、私は何度もこの反応を使用したので、それは非常に恥ずかしがり屋ですが、まだそれを適切な方法を使用することを躊躇します.

リターンコードのようです

return (
        <div>
          <input type="text" onKeyDown={downHandler}/>
          <ul>
              {list.map(v=> <li key={keyId++}>{v}</li> )}
          </ul>
        </div>
    )

そして、内部の関数はHTMLリストを繰り返すために使用しました.したがって、それは入力値でUL - Liタグを繰り返しています.
ユニークキーのために、“keyid”と呼ばれる1つの変数を使いました、そして、私はそれをユニークにするためにkey属性の中に入れました.

const [list, setList] = useState([]);
    let keyId = 1;
    const downHandler = e=> {
        if(e.key === 'Enter'){
            setList(old=> [...old, e.target.value])
        }
    }

それは私にインターネット上で見つけるために時間の時間を取っている.
それは非常に内気なreactjsは私の日を乱雑にし、何かを構築する各問題を設立した.
入力した値でUL - Liタグを繰り返して完全なコードの下に

import React, {useState} from 'react'

function February_4() {
    const [list, setList] = useState([]);
    let keyId = 1;
    const downHandler = e=> {
        if(e.key === 'Enter'){
            setList(old=> [...old, e.target.value])
        }
    }
    return (
        <div>
          <input type="text" onKeyDown={downHandler}/>
          <ul>
              {list.map(v=> <li key={keyId++}>{v}</li> )}
          </ul>
        </div>
    )
}

export default February_4

このようなコンテンツを取得し、reactjsダミーの問題と内気にするには私と一緒にご利用いただけます.
ありがとう.