TIL. setState in object array

예를들어 아래와 같은 Array 가 있다고 가정해보자

const tagsArr = [{title: 'a', select: true},{title: 'b', select: true}, {title: 'c', select: false}, {title: 'd', select: true},  ]

이 tagsArr 중 세번째 요소의 select 의 false 를 true 로 바꿔주고 싶다면?

tagsArr.map((el)=>{
	return <TouchableOpacity onPress={()=> convertSelectedTag(el)}>
	<Text>{el.title}</Text>      
</TouchableOpacity>
})

convertSelectedTag 라는 함수를 하나 만들어서 그 인자로 각 요소를 넣어준다.
convertSelectedTag 함수는 아래와 같이 생겼다.

  const convertSelectedTag = (tag) => {
    const arr = [];

    for (const [index, element] of tagsArr.entries()) {
      arr.push(element);
    }
    const idx = arr.indexOf(tag);
    const copySelectedTags = [...tagsArr];
    copySelectedTags[idx] = { title: tag.title, select: !tag.select };
    setNewTages(copySelectedTags);
  };

tag를 인자로 받고 for of 를 사용해서 각 tag를 새 배열에 넣어주고 내가 선택한 태그가 tagsArr의 몇번째 요소로 들어가있는지 확인한다.

그리고 그 값을 setState 하기 전에 원래의 tagsArr를 복사해주고(꼭 spread를 사용해줘야 objcect Array 를 복사할 수 있다. 즉, setState를 했을때 즉각적으로 state가 변경된다.)

그 후 copy본의 idx 번째 요소를 원하는 대로 바꿔주고 setState를 해주면 된다.