맵 함수 내부의 컴포넌트에 매개 변수를 사용하여 onClick 지정 React

질문

 

https://codesandbox.io/s/hardcore-thompson-cu720?file=/src/App.js

map을 사용하여 String 배열을 렌더링하고 클릭 한 문자열의 이름으로 변수 상태를 설정하려고합니다. 불행히도 내 onClick이 아무것도하지 않는 것 같습니다.

function Message(props) {
  return <button>{props.name}</button>;
}

...
const names = ["Alice", "Bob", "Tom"];
const [selected, setSelected] = useState("none selected");

return (
  <div className="App">
    {selected}
    <div>
      {names.map(name => (
        <Message name={name} onClick={() => setSelected(name)} />
      ))}
    </div>
  </div>
);

 

답변1

 

메시지 component에는 기본적으로 클릭 이벤트 리스너가 없습니다. Message component 내의 버튼 에서 click 이벤트를 추가해야합니다.

function Message(props) {
  return <button onClick={props.onClick}>{props.name}</button>;
}

 

 

 

 

 

출처 : https://stackoverflow.com/questions/63276620/assigning-onclick-with-a-parameter-to-a-component-inside-of-map-function-react