codestates / BanThing

🍔배달비를 BanThing하는 구인 플랫폼입니다.
0 stars 2 forks source link

[Error Handling] React에서 onClick 리스너가 동작하지 않는 문제 #243

Open shren207 opened 2 years ago

shren207 commented 2 years ago

어떤 에러인가요?

const handleDelete = (e) => {
    console.log(e.target);
  };

  return (
    <>
      <Head>
        <title>BanThing</title>
        <meta name="BanThing" content="Order with your foodmate" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.container}>
        <div className={styles.container_container}>
          가입한 유저 목록
          <ul>
            {userlist.map((el) => {
              const { nickname, auth } = el;
              return (
                <li key={nickname} onClick={handleDelete}>
                  <div>{nickname}</div>
                  <div>{auth}</div>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  );

위와 같이 li 엘리먼트를 클릭하면 이벤트 핸들러 handleDelete가 호출되어 콘솔에 출력되어야 하는데 원하는대로 동작하지 않습니다.

에러 핸들링 방법

에러 핸들링을 위해 참고한 레퍼런스 링크