ReactJS, Todo list, how to remove elements from list - reactjs

Question

I'm ReactJS newbie (well, to be specific I'm programming newbie) looking for some answers, please don't exclude me for obvious stupidity :) I'm having big troubles with passing props and understanding 'this' context.
This is my mess, two simple Todo app components. TodoApp:
import React from 'react';
import uuid from 'uuid';
import style from './App.css';
import Title from '../components/Title.js';
import TodoList from '../components/TodoList.js';
class App extends React.Component {
constructor(props) {
super(props);
this.title = "Todo Application"
this.state = {
data: [{
id: 1,
text: 'clean room'
}, {
id: 2,
text: 'wash the dishes'
}, {
id: 3,
text: 'feed my cat'
}]
};
}
removeTodo(id) {
const remainder = this.state.data.filter(item => item.id !== id);
this.setState({data: remainder});
}
render() {
return (
<div className={style.TodoApp}>
<Title title="Todo Application" added={this.state.data.length} />
<TodoList data={this.state.data} remove={this.removeTodo}></TodoList>
</div>
);
}
}
export default App;
And TodoList:
import React from 'react';
const TodoList = props => (
<ul>
{props.data.map((item, index) =>
<li key={index}>
{item.text}
<button value={index} onClick={() => props.remove(index)}>x</button>
</li>
)}
</ul>
);
export default TodoList;
My question is how to correctly pass props to child component (TodoList) so that remove button would work?

Answer 1

To make sure the this always refers to the App context where your removeTodo method is defined, you can add the following inside your constructor (after setting the initial state):
this.removeTodo = this.removeTodo.bind(this);
Otherwise, your code isn't messy at all. It's even surprisingly concise and well thought out, even much more so for a self-proclaimed beginner. Congratulations!
As pointed out by Sag1v in the comment below, you're also not passing the correct value to your removeTodo method. You're passing the index of the item being iterated on, instead of its id.
Change your <button> invocation to the following:
<button value={index} onClick={() => props.remove(item.id)}>x</button>
Note that you could also achieve the same with the following:
<button value={index} onClick={props.remove.bind(null, item.id)}>x</button>

Answer 2

You got 2 main problems here:
As Jaxx mentioned you are not binding the handler removeTodo to
the class.
There are couple of ways to do it.
Bind it in the constructor:
this.removeTodo = this.removeTodo.bind(this);
Or use the ES2015(ES6) Arrow functions which will use the lexical context for this:
removeTodo = (id) => {
const remainder = this.state.data.filter(item => item.id !== id);
this.setState({data: remainder});
}
The 2nd problem is that inside TodoList onClick handler you are
not passing the correct id to the handler, you are passing the
index position.
onClick={() => props.remove(index)}
You should change that to:
onClick={() => props.remove(item.id)}
There is another problem with this approach which i'll explain next.
Here is a working example:
const Title = ({title}) => <h1>{title}</h1>
const TodoList = props => (
<ul>
{props.data.map((item, index) =>
<li key={index}>
{item.text}
<button value={index} onClick={() => props.remove(item.id)}>x</button>
</li>
)}
</ul>
);
class App extends React.Component {
constructor(props) {
super(props);
this.title = "Todo Application"
this.state = {
data: [{
id: 1,
text: 'clean room'
}, {
id: 2,
text: 'wash the dishes'
}, {
id: 3,
text: 'feed my cat'
}]
};
}
removeTodo = (id) => {
const remainder = this.state.data.filter(item => item.id !== id);
this.setState({data: remainder});
}
render() {
return (
<div>
<Title title="Todo Application" added={this.state.data.length} />
<TodoList data={this.state.data} remove={this.removeTodo}></TodoList>
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
As i said, there is a problem with this approach, you are passing a new instance of a function on each render with this line of code:
onClick={() => props.remove(item.id)
This is considered as bad practice because this can interrupt the Reconciliation and diffing algorithm
But as we know, event Handlers should get a function reference, hence you can't just pass a function invocation like this
onClick={props.remove(item.id)}
This will pass the function's return type (if any) and not the reference for the function.
So the proper way of passing a function reference is like this:
onClick={props.remove}
But that is not good for your case as you need to pass back to the parent the current item id, but i'm afraid that the browser will only pass back the event parameter.
So what are the alternatives you ask?
Create another component and control the data you pass in and out from your component instead of relying on the goodwill of the browsers.
Here is another working example but this time without creating a new function instance on each render
const Title = ({title}) => <h1>{title}</h1>
class TodoItem extends React.Component {
handleClick = () => {
const{item, onClick} = this.props;
onClick(item.id);
}
render(){
const {item} = this.props;
return(
<li>
{item.text}
<button value={item.id} onClick={this.handleClick}>x</button>
</li>
);
}
}
const TodoList = props => (
<ul>
{props.data.map((item, index) =>
<TodoItem key={index} item={item} onClick={props.remove} />
)}
</ul>
);
class App extends React.Component {
constructor(props) {
super(props);
this.title = "Todo Application"
this.state = {
data: [{
id: 1,
text: 'clean room'
}, {
id: 2,
text: 'wash the dishes'
}, {
id: 3,
text: 'feed my cat'
}]
};
}
removeTodo = (id) => {
const remainder = this.state.data.filter(item => item.id !== id);
this.setState({data: remainder});
}
render() {
return (
<div>
<Title title="Todo Application" added={this.state.data.length} />
<TodoList data={this.state.data} remove={this.removeTodo}></TodoList>
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>