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