How to Get the Id of a Button That Was Clicked - Reactjs

React getting the ID of clicked button

Using an arrow function will maintain the context of this from the outside, which won't be the this you want. You could try to use a regular function (function () { }) instead, but I'm not sure if this will be what you want or not there either.

You can, however, definitely use e.target.id to get what you want:

onClick={e => this.reply_click(e.target.id)}

That said, you should really avoid creating functions inside of things as it can create significant performance issues. It's much better to just create a function and pass it in:

// somewhere above
const handleClick = e => this.reply_click(e.target.id);

// attribute
onClick={handleClick}

React onCLick() get buttons id

You need to pass the event in the onClick function like this:

onClick={(e) => handleClick(e)}

Then in your handleClick function, you can get the id from the event target like this:

alert(e.target.id);

Example:
https://codesandbox.io/s/relaxed-glade-cv7ce?file=/src/App.js

How to get id when edit button is clicked in Reactjs

You can get the id from event.target or event.currentTarget

const editStudent = (event)=>{

  console.log(event.target.id); // or try event.currentTarget.id

  // localStorage.setItem('uniqID',localStorage.getItem('id'))

  // return history.push('/admin/edit')

}

<Button id='1' onClick={editStudent}>
 Edit
</Button>

if i click button then show this button id in reactJs

<CartStyle
  key={i}
  id={i}
  title={v.title}
  price={v.DiscountPrice}
  img={v.image}
  delete={(i) => showContent(i)} // or delete={showContent}
/>

// CartStyle
<button id="delBtn" onClick={() => props.delete(props.id)} className="btn btn-primary my-2">Delete</button>

how to get the id of the card in which the button is selected in REACT

You can pass the iterated experience to showConfirm or showDelete functions like:

<Button type="link" onClick={() => showConfirm(experience, index)}>
  <CheckOutlined /> VALIDATE
</Button>

with this clicked experience as param, yours will be values, you can did what you want.

you will have the clicked experience and her index if needed

In react how to detect the button id clicked on not

First of all there is no need to use document.getElementById("yourID").clicked === true because button has onClick property that you are using which does what you want.

And as to solve your problem, you have a typo in your code. You typed yourId in e.currentTarget.id === "yourID" instead of yourID

const getButtonId = (e) => {
    if (e.currentTarget.id === "yourID") {
        alert("button clicked");
   }
}

React onclick pass button api id to state

From the React docs for setState()

Think of setState() as a request rather than an immediate command to
update the component. For better perceived performance, React may
delay it, and then update several components in a single pass. React
does not guarantee that the state changes are applied immediately.

Try logging this.state inside your render function and you will see how it actually IS happening after the first click - but your log is displaying it before the state updates.

---

Related Topics