How to pass parameter to a function on onClick event in ReactJS - reactjs

Question

class UserList extends Component{
constructor() {
super();
this.state = {
list: [],
};
}
componentDidMount() {
this.getList();
}
getList(){
axios
.get('/getList')
.then(response => {
if(response.data.status == 'success'){
this.setState({
list: response.data.list,
});
console.log(response);
}
})
.catch(error => {
if (error.response) {
console.log(error.response);
}
});
}
{/*I want to call this function with userid when remove button is pressed */}
deleteUser(){
}
render(){
if(!localStorage.getItem('name')){
return( <Redirect to={'/login'} /> )
}
return (
<div id="wrapper">
<table className="table table-hover">
<thead>
<tr>
<th>#No</th>
<th>#Name</th>
<th>#Delete</th>
</tr>
</thead>
<tbody>
{
this.state.list.map(function(item, i){
return <React.Fragment>
<tr key={i}>
<td>{item.id}</td>{/* **This is user id** */}
<td>{item.name}</td>
<td>
<button type="button" onClick="deleteUser(item.id)" className="btn btn-danger btn-sm">Remove</button>
</td>
</tr>
</React.Fragment>
})
}
</tbody>
</table>
</div>
)
}
}
export default UserList;
I am new to ReactJS. I am trying to pass userid to function with onClick event to Remove button. But unable to send userid and it shows error. How can I do it. Can anybody help me with this.
I am trying to pass userid to function with onClick event to Remove button. But unable to send userid and it shows error. How can I do it. Can anybody help me with this.
I am trying to pass userid to function with onClick event to Remove button. But unable to send userid and it shows error. How can I do it. Can anybody help me with this.

Answer 1

Your handler is not bound. You need to declare it like this:
onClick={() => this.deleteUser(item.id)}
So change it to:
{this.state.list.map((item, i) => {
return <React.Fragment>
<tr key={i}>
<td>{item.id}</td>{/* **This is user id** */}
<td>{item.name}</td>
<td>
<button
type="button"
onClick={() => this.deleteUser("asd")}
className="btn btn-danger btn-sm"
>
Remove
</button>
</td>
</tr>
</React.Fragment>
})}
And your handler:
deleteUser = (id) => {
console.log(id)
}

Answer 2

You can call a function in ReactJS with:
<button type="button" onClick={() => deleteUser(item.id)}>...</button>
The function call is an expression and hence you need to use {} instead of double quotes.
Another essential ingredient for this to work is the context in which it is called. Currently it is inside a function, like so:
.map(function(item, i) {
})
The function here owns the usage of this inside it and hence this.deleteUser will not work. To get this to work, you need to convert function to an arrow function which has no this binding.
.map((item, i) => {
return (
<button type="button" onClick={() => deleteUser(item.id)}>...</button>
)
})