How to pass tag id to to onClick function in react?

Question

I want to pass id of th tag <th id='1' onClick={this.click.bind(this)}> to on click function. Suppose i want to print the id of <th> in click() function console.log. here is the code-

<thead>
 <tr>
    <th id='name' onClick={this.click.bind(this)}>Name</th>
    <th id='phone' onClick={this.click.bind(this)}>Phone number</th>
    <th id='email' onClick={this.click.bind(this)}>Email</th>
 </tr>
</thead>

the click() function-

click(){
console.log('the clicked id is:') //here i want the id
}

what do you mean by id exactly? name should be printed on clicking Name th tag? — Vikram Saini, Jun 07 '17 at 08:08
`onClick={this.click.bind(this, 'phone')}` then `onclick(id){console.log(id)}` — Mayank Shukla, Jun 07 '17 at 08:14
Possible duplicate of [How can I get a html tag's value on React?](https://stackoverflow.com/questions/40732791/how-can-i-get-a-html-tags-value-on-react) — Shubham Khatri, Jun 07 '17 at 08:21

score 0 · Accepted Answer · answered Jun 07 '17 at 08:07

0

Bind takes arguments

this.click.bind(this, 'phone')

click(phone) {
  // ...
}

or use es6 arrow functions

onClick={() => this.click('phone')}

answered Jun 07 '17 at 08:07

Alexes

230
3
9

score 0 · Answer 2 · answered Jun 07 '17 at 08:13

You can do something like this:

const headers = [
  { id: 'name', label: 'Name' },
  { id: 'phone', label: 'Phone' },
  { id: 'Email', label: 'Name' },
]

const ab = (
  <thead>
    <tr>
      {headers.map(doc => (
        <th onClick={() => { this.click(doc.id) }}>{doc.label}</th>
      ))}
    </tr>
  </thead>
)

anu_gregory · Answer 3 · 2018-01-04T15:39:13.543

0

This should work:

<tr>
  <th id='name' onClick={this.foo}>Name</th>
  <th id='phone' onClick={this.foo}>Phone number</th>
  <th id='email' onClick={this.foo}>Email</th>
</tr>

The onclick function

   foo=(e)=> {
     console.log(e.target.id);
   }

edited Jan 04 '18 at 15:39

answered Jan 04 '18 at 00:26

anu_gregory

16
2

How to pass tag id to to onClick function in react?

3 Answers3

Linked