규몽이츠-개발이슈 map 루프도중 현재요소의 정보만 컴포넌트에 전달하고 싶을때

기존에 코드에서는 map 함수 안에서 menuList가 있는 만큼 반복문을 돌려주며 QuantitySelect 버튼을 눌렀을 때 showModal 함수를 실행시키고 isModalVisible 상태를 true로 바꿔줘 Modal 컴포넌트를 렌더링 시켰다.

그러면서 Modal 컴포넌트에 props로 menuList인 m 값을 주었는데 그 결과 

 

내가 필요한 건 1개의 현재 요소 데이터였는데 모든 요소를 ​​반복하고 모달 내부 페이지의 모든 요소에 대해 마지막으로 입력 한 데이터만 표시되었다.

 

 

해결법

 

 

원인은 내가 루프 안에 버튼을 클릭했을 땐 이미 루프가 돌고 마지막 요소만 렌더링 되기 때문이었다.

그래서 우선 Modal 컴포넌트는 map루프에서 탈출시킨 다음 useState으로 target 상태를 관리해주고 버튼을 눌렀을 때 showModal 함수에 현재 루프의 menuList 요소 값을 매개변수로 전달했다. 그리고 그 값을 setTarget으로 저장해주고 Modal 컴포넌트에 target을 props로 전달했다.

 

그 결과 내가 원하는 현재요소만 전달되었다! (target 초기값은 null로 수정했다)

 

 

 

참고링크