Can't call function inside static function ReactJs

Question

I can't call function inside static function. Inside static function containing looping map to create a list, inside lopping I call function using a onClick but not working. I don't know to parse function correctly

ListData.js

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

    // This binding is necessary to make "this" work in the callback  
    this.getClientReport = this.getClientReport.bind(this);
    this.handleDelete = this.handleDelete.bind(this);

    fetch('api/SampleData/Employees')
        .then(response => response.json())
        .then(data => {
            this.setState({ forecasts: data, loading: false });
        });
}

//handle download file
getClientReport(id) {
    alert('test')
}

//handle delete
handleDelete(id) {
    alert('test')
}

//handle table
static renderForecastsTable(forecasts) {
    return (
        <table className='table table-striped'>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Photo</th>
                    <th>Height</th>
                    <th>Weight</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {forecasts.map((forecast, index) =>
                    <tr key={forecast.employeeId}>
                        <td>{index + 1}</td>
                        <td>{forecast.employeeName}</td>
                        <td><a onClick={() => this.getClientReport(forecast.employeeId)}>Download File</a></td>
                        <td>{forecast.height}</td>
                        <td>{forecast.weight}</td>
                        <td>
                            <Link to={"/add-list/" + forecast.employeeName}>Edit</Link> | 
                            <a onClick={() => this.handleDelete(forecast.employeeId)}>Delete</a>
                        </td>
                    </tr>
                )}
            </tbody>
        </table>
    );
}

render() {
    let contents = this.state.loading
        ? <p><em>Loading...</em></p>
        : ListData.renderForecastsTable(this.state.forecasts);

    return (
        <div>
            <h2>List Employee</h2>
            {contents}
        </div>
    );
}

handleDelete and getClientReport not create onclick in HTML

Static functions aren’t part of a class instance so the instance methods can’t be found. Why do you use static? — Kokodoko
– Kokodoko, Commented Jul 15, 2019 at 8:16

Gabriele Petrioli · Accepted Answer · 2019-07-15 08:20:45Z

3

Do not make it a static

The static keyword defines a static method for a class. Static methods aren't called on instances of the class. Instead, they're called on the class itself. These are often utility functions, such as functions to create or clone objects.

(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static)

after you make the change do not forget to alter your render to use this.renderForecastsTable(this.state.forecasts) instead of ListData.renderForecastsTable(this.state.forecasts).

edited Jul 15, 2019 at 8:20

answered Jul 15, 2019 at 8:14

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

3 Comments

Stfvns Over a year ago

what I must do? when I remove static It's will be error to render it. Give me solution too

Gabriele Petrioli Over a year ago

@Stfvns after you remove the static, in the render use this.renderForecastsTable instead of ListData.renderForecastsTable. It is now a method of the class.

Gabriele Petrioli Over a year ago

@Stfvns onClick are JS events, they will not show in the html markup. They are bound through JS, so try clicking on it to see if it works.

Phillip · Accepted Answer · 2019-07-15 08:13:33Z

0

A static method will not have the same this as the calling class instance. I recommend you make the method non-static, I see no reason why it should be so. Another alternative is to pass the required methods (this.handleDelete and this.getClientReport as additional parameters.

answered Jul 15, 2019 at 8:13

Phillip

6,3033 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

Can't call function inside static function ReactJs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related