select안에 들어가는 option을 동적 생성하려면 다음과 같은 방식으로 접근할 수 있다.
const list = () => {
let result = []
Array_Data.map( (data, index) => {
result.push(
<option key={index+"_"} value={index}>{index + 1}</option>
)
})
return result
}
Array_Data 안에 있는 배열의 개수 만큼 .map으로 접근 후 loop를 돌려 result에 option 태그를 계속해서 넣어주었다. 그 후 JSX태그 안에 {list} 형식으로 넣어주면 끝이다. map의 특성상 key와 value를 요구하기 때문에 key를 넣어주었다. 없어도 된다.
{
props.data == 0
?
<></>
:
<select onChange={ChangeValue}>
{list()}
</select>
}
option의 값을 가져올 때는 onChange 이벤트로 접근하여 해당 이벤트에 등록된 함수에서 이벤트 파라미터를 이용하여 e.target.value 형태로 값을 가져올 수 있다.
function ChangeValue(e){
console.log(e.target.value)
for(let i = 0; i < Array_Data[e.target.value].length; ++i){
props.setArray(lists => [...lists, {
id: Array_Data[e.target.value][i].id,
name: Array_Data[e.target.value][i].name,
count: Array_Data[e.target.value][i].count,
type: Array_Data[e.target.value][i].type
}])
}
}