ReactJS Button not calling the onClick event

Karl

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.

user7143559

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Cordova: onclick event is calling before button click

From Dev

ReactJS- Radio Button "onClick" event is not triggered

From Dev

Calling multiple functions onclick event Reactjs - react datepicker

From Dev

Calling a typescript method from your html button onclick event

From Dev

Calling id of button to javascript file after onclick event

From Dev

How to Add seprate Loader file on a onClick event button on ReactJS?

From Dev

ReactJS // SearchBar onClick button

From Dev

ReactJS calling two functions with onClick

From Dev

QtQuick - button onClick event

From Dev

OnClick event for dynamic button?

From Dev

Function is not calling on onclick event in React

From Dev

Javascript - Calling a function for an onClick event

From Dev

ReactJS onClick event to another component

From Dev

can not add a onClick event in reactjs

From Dev

ReactJs - accessing state in the onclick event

From Dev

how to write onclick event in reactjs?

From Dev

OnClick event handler redirect to in reactjs?

From Dev

Weird bug in ReactJs - onClick event

From Dev

ReactJS onClick event on an array element

From Dev

Calling a javascript function on button onclick

From Dev

Flask - Calling python function which takes input parameters on button OnClick event

From Dev

Drag and Drop into Shopping Cart by simply calling the already programmed onClick event from the Button

From Dev

WKScriptMessageHandler won't Listen to 'onclick' or 'click' event on a button element on a webpage. The web page is developed using Reactjs

From Dev

onClick function is not working in ReactJs on Button

From Dev

Display new button on onClick(); ReactJS

From Dev

Reactjs disable button onclick realtime

From Dev

How to use button onClick in reactjs?

From Dev

Adding an onclick event to a button with a button that has an onclick event?

From Dev

Disabled button onclick event fires

Related Related

  1. 1

    Cordova: onclick event is calling before button click

  2. 2

    ReactJS- Radio Button "onClick" event is not triggered

  3. 3

    Calling multiple functions onclick event Reactjs - react datepicker

  4. 4

    Calling a typescript method from your html button onclick event

  5. 5

    Calling id of button to javascript file after onclick event

  6. 6

    How to Add seprate Loader file on a onClick event button on ReactJS?

  7. 7

    ReactJS // SearchBar onClick button

  8. 8

    ReactJS calling two functions with onClick

  9. 9

    QtQuick - button onClick event

  10. 10

    OnClick event for dynamic button?

  11. 11

    Function is not calling on onclick event in React

  12. 12

    Javascript - Calling a function for an onClick event

  13. 13

    ReactJS onClick event to another component

  14. 14

    can not add a onClick event in reactjs

  15. 15

    ReactJs - accessing state in the onclick event

  16. 16

    how to write onclick event in reactjs?

  17. 17

    OnClick event handler redirect to in reactjs?

  18. 18

    Weird bug in ReactJs - onClick event

  19. 19

    ReactJS onClick event on an array element

  20. 20

    Calling a javascript function on button onclick

  21. 21

    Flask - Calling python function which takes input parameters on button OnClick event

  22. 22

    Drag and Drop into Shopping Cart by simply calling the already programmed onClick event from the Button

  23. 23

    WKScriptMessageHandler won't Listen to 'onclick' or 'click' event on a button element on a webpage. The web page is developed using Reactjs

  24. 24

    onClick function is not working in ReactJs on Button

  25. 25

    Display new button on onClick(); ReactJS

  26. 26

    Reactjs disable button onclick realtime

  27. 27

    How to use button onClick in reactjs?

  28. 28

    Adding an onclick event to a button with a button that has an onclick event?

  29. 29

    Disabled button onclick event fires

HotTag

Archive