[REACT] useState를 사용한 두 개의 버튼 동작 오류

Question

안녕하세요!react를 공부하면서 취업을 위한 프로젝트를 만드는 도중에막힌 부분이 생겼는데 아무리해도 방법을 모르겠네요..ㅠㅠ 혼자서 해결해보려고 며칠을 이 방법 저 방법 구글 다 뒤져가며 해봤는데해결 방법을 찾지 못해 질문을 올리게 되었습니다! 제가 그리고 싶은 버튼의 모양은 이런 모양입니다 해결하고 싶은 문제점은- 맛을 클릭하면 맛이 담고있는 내용을 보여주고 지역을 클릭하면 맛은 다시 접혀지면서 지역이 담고있는 내용을 보여주고 싶습니다- 제가 해 본 방법으로는 맛을 클릭하던 지역을 클릭하던 두가지의 내용이 같이 보여지고 같이 사라집니다 function Select() { let [characters] = useState(characterData); let [locations] = useState(locationData); let [, setSelectId] = useState(); let [clickValue, setClickValue] = useState(false); let [isExpanded, setExpanded] = useState(false); return (

{/* 첫 번째 버튼 */}

{ setExpanded(isExpanded => !isExpanded); }} > 어떤빵?

); })}

{/* 두 번째 버튼 */}

{ setExpanded(isExpanded => !isExpanded); }} > 어디?

); })}

);}똑같이 생긴 버튼을 두 개 만드는데 하나의 버튼을 만들고 똑같이 복사하면 된다고 생각하여버튼의 header 부분도 반복적이라 생각해서 component로 만들어서 해보기도 했는데 그래도 결과는 다르지 않아서 각 버튼에 header 영역을 따로 만들어서 해보았는데도 어느 부분이 문제인건지 잘 모르겠습니다.. 도움 부탁드립니다ㅠㅠ

둠칫따당 · Accepted Answer

isExpanded이 변수를 맛, 위치 서로 다른 변수로 분리해주세요이걸하면 서로 따로 열닫 되게 될거예요

둠칫따당 · Answer

아이템 선택할 때의 함수도 보여주셔야 알아요characterBtnlocationBtn

G9 · Answer

둠칫따당 그 부분의 코드도 보여드려야 된다는 말씀이신거죠?! 말씀하신 부분의 코드입니다!const characterBtn = id => { setSelectId(id); setClickValue(clickValue => !clickValue); characters[id].isChecked = !clickValue; }; const locationBtn = id => { setSelectId(id); setClickValue(clickValue => !clickValue); locations[id].isChecked = !clickValue; }; 이 부분의 코드는 다른 영역이라고 생각해서 지우고 올렸었는데 혹시 보시는데에 불편함이 없으셨으면 좋겠습니다!function SelectBtn(props) { return (

); }

G9 · Answer

둠칫따당같은 state 변경함수를 넣어도 클릭하는 버튼이 다르니까 괜찮다고 생각을 했는데그 부분이 문제였네요ㅠㅠ 해결했습니다! 정말정말 감사합니다!!

둠칫따당 · Answer

홧팅

[REACT] useState를 사용한 두 개의 버튼 동작 오류

5개의 답변

#button 목록