Zain Ul Abideen
Zain Ul Abideen

Reputation: 459

How to pass custom attributes onClick in React

I want to pass custom attribute task to function. following is the code but it is giving undefined

function handleChange(e)
{
   console.log(e.target.task)
}


const listTask = props.tasks.map((task)=>
{
   return(
      <option key={task._id} task={task}>{task.title}</option>
   )
})

return(

<select onChange={handleChange}>
       {listTask}
</select>
)

in handleChange method, I want to access task attribute is there any way?

Upvotes: 1

Views: 311

Answers (1)

hgb123
hgb123

Reputation: 14891

You could try this

function handleChange(e, task) {
  console.log(task)
}


<select onChange={e => handleChange(e, task)}>
  <option key={task._id} task={task}>
    {task.title}
  </option>
</select>


Reference: Passing Arguments to Event Handlers

Upvotes: 1

Related Questions