Todo React App

TodoListApp.jsx

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <TodoList />
    )
  }
}

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      foo: 'bar',
      todos: [
        { id: 1, text: "Go to store" },
        { id: 2, text: "Watch TV" },
        { id: 3, text: "Do Homework" },
        { id: 4, text: "Walk the cat" }
      ]
    }
  }

  remove(id) {
    console.log('id');
    const newList = [];
    for(let i=0; i<this.state.todos.length; i++) {
      if(this.state.todos[i].id !== id) {
        newList.push(this.state.todos[i]);
      }
    }

    // const newList = this.state.todos.filter(item => item.id !== id);
    this.setState({
      todos: newList
    });
  }

  render() {
    return (
      <ul>
        {
          this.state.todos.map( 
            todoItem => (
              <Todo 
                key={todoItem.id}
                text={todoItem.text}
                remove={() => {
                  this.remove(todoItem.id);
                }}
                />
            )
          )
        }
      </ul>
    );
  }
}

const Todo = (props) => {
  return <li onClick={props.remove}>{props.text}</li>
}



export default App;