How to pass parameter to a function on onClick event in 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.

Does this answer your question? [React onClick function fires on render](https://stackoverflow.com/questions/33846682/react-onclick-function-fires-on-render) — lux, Nov 03 '19 at 18:32

Nicolas Hevia · Accepted Answer · 2019-11-03T18:33:31.463

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)
}

It shows error:- TypeError: Cannot read property 'deleteUser' of undefined — Raj Biswas, Nov 03 '19 at 18:16
I've updated the handler with an arrow function, try it. Here is a working [codesandbox](https://codesandbox.io/s/pensive-forest-5ot9p) — Nicolas Hevia, Nov 03 '19 at 18:28

score 0 · Answer 2 · answered Nov 03 '19 at 18:33

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>
  )
})

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

2 Answers2