How to pass a variable into your onClick function
Tags: javascript, webdev
Published: 2023-01-16 14:49:47

Hello everyone, it's been a really long while. Happy new year, firstly!

I've decided to restart doing some daily code challenges again just to refresh my memory and what better way to go about it then to do some Todo project. A simple project that can add, remove and move todo items from a list.

I'll just start off by saying this is completely from an observatory standpoint. It's an interesting one. I got stuck on it for a few minutes, but it's interesting nonetheless. 

So here's the frontend code.

``` javascript
<p>Todos</p>
   <ul>
          {
            todosArr.map((todo, id) => {

              return(
                  <div key={id}>
                     <li key={id}>{todo}</li>
                     <button onClick={(id) => onRemove(id)}>Remove</button>
                  </div>
              )
            })
          }
  </ul>
```

The above code renders the Todos section like this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/520wl6axeew46tpvj6jl.png)

So, from here, I would like to implement the "Remove" button. The way I'm going to go about doing it, is to get the `id` of each row or text, pass it to a `removeItem` function and remove it from there.

So, you can roughly see what I'm trying to do here. Get the `id` and pass it to a function.

``` javascript
todosArr.map((todo, id) => {
   return(
     <div key={id}>
        <li key={id}>{todo}</li>
        <button onClick={(id) => onRemove(id)}>Remove</button>
     </div>
   )
})
```

This is my `onRemove` function.

``` javascript
const onRemove = (id) => {
    console.log(`id: ${id}`)
    console.log(id)
    let tmpTodos = [...todosArr]

    tmpTodos.splice(id, 1);
        
    setTodosArr(tmpTodos)
}
```

When I click on the "Remove" button, this is what it outputs.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuukb9wrbgn6pq53q4fo.png)

So, as you can see, it does not output the `id`, but instead outputs the `SyntheticBaseEvent`.

Let's say, I were to edit the code as such. I remove the `id` from the `onRemove` callback.

So now, instead of 

``` javascript
<button onClick={(id) => onRemove(id)}>Remove</button>
```

it becomes,

``` javascript
<button onClick={() => onRemove(id)}>Remove</button>
```

When I click on the "Remove" button, the function is now correct.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkhsmmbdp9qv0zp70b5l.png)

So, as it turns out, doing it like this,

``` javascript
<button onClick={(id) => onRemove(id)}>Remove</button>
```
means you're passing the `Event` object to the `onRemove` function.

Ok, cool.

How about we go about it a different way? Let's make it clearer. How about this code?

``` javascript
<button onClick={(event) => onRemove(event, id)}>Remove</button>
```

We will explicitly define it as such, which means we would have to modify our `onRemove` code as well.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71czbukbnu3fbvjw13ul.png)

It works.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7oy0mk25kywy5gexfpd.png)

Let's change our code again to this.

``` javascript
<button onClick={onRemove}>Remove</button>
```

Our `onRemove` function will also change to this.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl5wa9waopu66i9nyahv.png)

So, what does it output?

Interesting. It outputs the `event` object.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96cwttw764py62d9dfxd.png)


Alright, so as a recap, all these work.

``` javascript
<button onClick={() => onRemove(id)}>Remove</button>
```

``` javascript
<button onClick={(event) => onRemove(event, id)}>Remove</button>
```