ReactJS Button not calling the onClick event

Question

So my problem here is that my button onClick method is not calling my function.

import React, { Component } from 'react';
import axios from 'axios';



export class FetchData extends  Component {
  static displayName = FetchData.name;

  constructor(props) {
    super(props);
    this.state = { users: [], loading: true };
  }

  componentDidMount() {
    this.getDataAxios();
  }

  deleteItem(){
    console.log("blabla");
    return this.state;
  }

  editItem = () => {
    console.log("asdasd")
  }


  static renderUsersTable(users) {
    return (
      <table className='table table-striped' aria-labelledby="tabelLabel">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Type</th>
            <th>Action</th> 
          </tr>
        </thead>
        <tbody>
        {users.map(items => 
        <tr key=""> 
        <td>{items.id}</td>
        <td>{items.name}</td>
        <td>{items.age}</td> 
        <td>  
            <button type="button" onClick={this.deleteItem} className="btn btn-danger">Delete</button>  
        </td>
        <td>  
            <button type="button" onClick={this.editItem} className="btn btn-success">Edit</button>  
        </td>
         </tr> 

         )} 
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : FetchData.renderUsersTable(this.state.users);

    return (
      <div>
        <h1 id="tabelLabel" >API info</h1>
        <p>This component demonstrates fetching data from the api.</p>
        {contents}
      </div>
    );
  }

  async getDataAxios(){
    const response = await axios.get("https://localhost:5001/inventory");
    const data = await response.data;
    this.setState({ users: data, loading: false });
    console.log(data);
  } catch(err) {
      console.log(err)
 }
}

am I maybe doing something wrong with the constructor?

Neither of Edit or Delete buttons are even called when clicked, my console does not log anything at all, neither I get return of the state.

P.S. Some of the property names aren't 100% correct due to the current DATABASE.

Are you sure your compiler supports that syntax? You cannot always just define functions inside a React class like deleteItem = () => {}. Try defining the function the normal way. — TKoL
– TKoL, Commented Nov 7, 2019 at 17:11
@TKoL yes it does, I have the same function in my other React component which works fine. — Karl
– Karl, Commented Nov 7, 2019 at 17:13
Hi Karl. That code looks solid! should work. Could you provide the rest of the component ? — Viktor Garba
– Viktor Garba, Commented Nov 7, 2019 at 17:31
what happens when you console.log e.target on the button click event? — Husk Rekoms
– Husk Rekoms, Commented Nov 7, 2019 at 17:43

score 2 · Accepted Answer · 2019-11-07 17:53:37Z

2

Found the solution.

Change

FetchData.renderUsersTable

to

this.renderUsersTable

and remove static from the renderUsersTable method. And don't forget to add the bind inside the constructor:

this.deleteItem = this.deleteItem.bind(this);

edited Nov 7, 2019 at 17:53

answered Nov 7, 2019 at 17:45

user7143559

Sign up to request clarification or add additional context in comments.

1 Comment

Karl Over a year ago

Appreciate your effort!

user7143559 · Accepted Answer · 2019-11-07 17:23:32Z

1

Change

deleteItem = () => {

to:

deleteItem() {

and add this bind inside your constructor:

this.deleteItem = this.deleteItem.bind(this);

answered Nov 7, 2019 at 17:23

user7143559

2 Comments

Karl Over a year ago

It did not help.

user7143559 Over a year ago

Does your class extends Component ? (if you are not using hooks)

Collectives™ on Stack Overflow

ReactJS Button not calling the onClick event

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related