[React] 이벤트 함수에 매개변수 전달 (에러핸들링)

이벤트 함수에 매개변수를 전달하는 경우, 이를 return문에 전달하는 과정에서 에러가 발생했다.

 

문제 상황

1. return문에서 onClick 키워드로 이벤트 함수를 전달했으나, 매개변수가 전달되지 않음

2. 매개변수 및 클릭이벤트와 상관없이 이벤트 함수가 실행됨

 

export default function CompanyMyPage () {

  const [jobList, setJobList] = useState('') // Job 정보가 담기는 배열

  // job 엘리먼트 삭제 핸들러
  const DeleteJob = (jobId) => {
    axios.delete(`http://localhost:5000/job/${jobId}`, {withCredentials: true})
    .then(res=>{
      setEventStatus(!eventStatus)
    })
    .catch((err)=> {
      console.log(err)
    })
  }

  return (
    <>
    {jobList.map((job) => {
      return (
        <div key = {job.id}>
          <h3>{job.title}</h3>
          <h4>
            {job.location} 
            {job.position} 
            {job.hourlyWage} 
            {JSON.parse(job.day)}   
            {job.startTime}~{job.endTime}
          </h4>
          {/* 이벤트함수 전달 */}
          <button onClick={DeleteJob(job.id)}>삭제하기</button>
        </div>
      )
    })}
    </>
  )
}

 

해결방안

1. return 문에서 이벤트 함수를 콜백함수 형태로 전달하기

2. 매개변수를 넣어주기

 

{jobList.map((job) => {
  return (
    <div key = {job.id}>
      <h3>{job.title}</h3>
      <h4>
        {job.location} 
        {job.position} 
        {job.hourlyWage} 
        {JSON.parse(job.day)}   
        {job.startTime}~{job.endTime}
      </h4>
      {/* 이벤트함수 콜백함수로 전달 */}
      <button onClick={()=>{DeleteJob(job.id)}}>삭제하기</button>
    </div>
  )
})}