'TypeError: Cannot read property 'internal_method' of undefined', when I have bounded the context

Viewed 22

I'm working on a small beginners project with react, and I'm having trouble passing a method down to a child component. And the solution is not binding the context, which I've done (possibliy incorrectly). Does anyone know how to fix this? The app is a simple todo-management app, where I have a table of todos as the parent component, and several todos as rows/child components. The method I'm trying to pass to every todo is a method for rerendering the whole table. Here's the code:

import { Link } from 'react-router-dom';
import axios from 'axios';
import React, { Component } from 'react';
import Todo from './Todo';

export default class TodosList extends Component {

constructor(props) {
    super(props);
    this.updateComponent = this.updateComponent.bind(this);

    this.state = {todos: []};
}

componentDidMount() {
    axios.get('http://localhost:4000/todos/')
        .then(response => {
            this.setState({ todos: response.data });
        })
        .catch(function (error){
            console.log(error);
        })
}

updateComponent = () => {
    this.forceUpdate();
}

render() {
    return (
        <div>
            <h3>Todos List</h3>
            <table className="table table-striped" style={{ marginTop: 20 }} >
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Responsible</th>
                        <th>Priority</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.state.todos.map(function(currentTodo, i){
                            return <Todo todo={currentTodo} updateParent={this.updateComponent} key={i} />;
                        })
                    }
                </tbody>
            </table>
        </div>
    )
}

}

0 Answers
Related