[Javascript] map function error

Array.map();

서버에서 받아오는 데이터를 동일한 화면으로 출력할 때 아주 용이하지만,
여기에 click event 로 모달창을 띄우려고 한다면 ( 한가지의 state 값으로.. )
map된 모든 항목에서 모달창이 띄워짐
jQuery로 addEventListner로 처리하기도 하지만
난. state 값으로 하고 싶다.

해결방법

서버에서 데이터를 받아올 때, 배열에 modal에 관련한 값을 추가해준다
난 배열안에 배열로 추가할거다.

useEffect(()=>{
        fetch(config.SEARCH_CALLBACK_LIST+'/'+user, {
            headers: {
                'Content-Type':'application/json',
                'Accept':'application / json'
              }
        })
        .then (res=>{
            return res.json();
        })
        .then (data=> {
            console.log(data,"data check")
            data.map((d,index)=>(
                d.modal = {
                    id :'',
                    card :'',
                    status:false,
                }
            ))
            data.sort(function(a,b) {
                return b.bookmark-a.bookmark;
            })
            setCards(data)
        })
        .catch((err)=>{
            console.log(err)
        })
    },[])

d.modal~
부분이 받아온 데이터에 배열을 추가해준 것
status 값으로 열고 닫을것이기 떄문에 false로 설정, 클릭마다 true 값을 넣어준다.

서버에는 없는 값이지만 내가 추가해줘서 생김

{cards.map((card,index)=>(
.
.
.
<div className="edit" onClick={(e)=>onEdit(e,index, card.user_id,card.card_id)}><p className="edit_txt">편집하기</p>
 {
  card.modal.status 
  ?
  <ModifyContent />
  :
  null
  }
  .
  .
  .
  }

클릭이벤트로 인덱스값과 user_id, card_id 를 전달해,......;;

  const onEdit=(e,index,user_id, card_id)=>{

        const id=user_id;
        const card=card_id;
        const idx = index;

        var newCards = [...cards];
        newCards[idx] = {
            ...newCards[idx],
            modal :{
                id:id,
                card:card,
                status:!newCards[idx].modal.status,
            }
            
        }
        setCards(newCards);
        ModifyContent(id, card)

    }

newCards 라는 새로운 배열에 기존 배열 복사후 값 업데이트하고, setCards에 해당 배열 다시 넣어주면 복사완

내일은 외부영역 클릭시 modal.status 를 false 로 바꿔보겠음