[React] find 활용하여 첫 번째 요소의 값 반환하기

find() 

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.

만약 그런 요소가 없다면 undefind를 반환함.

 

 

find()구문

arr.find(callback[, thisArg])

 

매개변수

 

callback 배열의 각 값에 대해 실행할 함수.

element 콜백함수에서 처리할 현재 요소.

indexOptional 콜백함수에서 처리할 현재 요소의 인덱스.

arrayOptionalfind 함수를 호출한 배열.

thisArg선택 항목. 콜백이 호출될 때 this로 사용할 객체.

 

 

예제1 )

바뀌는 값을 객체화시켜 inventory라는 변수명으로 배열을 정의해주고,

inventory에 있는 name의 이름이 cherries라면 해당하는 배열을 출력해준다.

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

const result = inventory.find(fruit => fruit.name === 'cherries');

console.log(result) // { name: 'cherries', quantity: 5 }

 

 

예제 2)

    const onView = ( id ) => {
        // setCat( data[ id - 1 ] )

        //find
        setCat( data.find ( item => item.id === id ))
    }