CODEWITHSUNDEEP
reactjs
Krushna Joshi
Krushna Joshi

Reputation: 95

Make whole row clickable in reactJs

I'm new to reactJs. I want to make the whole row clickable.

deleteApp(appId) {
    if (window.confirm("Are you sure want to delete this app?")) {
      this.props.deleteApp(appId)
    }
  }

  showAds(appId) {
    console.log("Clicked")
  }

This is the function I'm trying to trigger the onClick event. For now I'm just consoling anything inside the function but it doesn't console anything 

<tbody>
  {
    apps.map(function (app, index) {
      return <tr key={index} onClick={() => { showAds(app._id) }}>
        <td></td>
        <td>
          {app.app_name}
        </td>
        <td>
          <a onClick={() => { deleteApp(app._id) }}>
            Delete
            </a>
        </td>
      </tr>
    })
  }
</tbody>

Above is the code which I'm using to perform the onClick event, but this doesn't work. I did the same with delete button and it works fine. But when I try to make the whole row clickable I cannot trigger the onClick event. I have searched many places but couldn't find any suitable solution to this problem.

The last thing i tried was to make the

Am I doing something wrong here?

UPDATE

Full code

Upvotes: 3

Views: 347

Answers (2)

dev
dev

Reputation: 313

Either use this.showAds or do const showAds = this.showAds

Upvotes: 2

Krushna Joshi
Krushna Joshi

Reputation: 95

I just found out that I didn't initialize the this.showAds inside the render function. 

 render() {
const { user } = this.props.auth
const { apps } = this.props.apps
const deleteApp = this.deleteApp

const showAds = this.showAds

I just had to declare the showAds inside the render function and it started to respond.

Upvotes: 3

Related Questions