Class Component Version

// src/components/TodoList.js
import React from 'react';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: props.initialTodos || [],
      newTodoText: '',
      filter: 'all' // can be 'all', 'active', or 'completed'
    };
  }
  
  handleInputChange = (e) => {
    this.setState({ newTodoText: e.target.value });
  };
  
  addTodo = (e) => {
    e.preventDefault();
    
    if (!this.state.newTodoText.trim()) return;
    
    const newTodo = {
      id: Date.now(),
      text: this.state.newTodoText,
      completed: false
    };
    
    this.setState(prevState => ({
      todos: [...prevState.todos, newTodo],
      newTodoText: ''
    }));
  };
  
  toggleTodo = (todoId) => {
    this.setState(prevState => ({
      todos: prevState.todos.map(todo => 
        todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
      )
    }));
  };
  
  deleteTodo = (todoId) => {
    this.setState(prevState => ({
      todos: prevState.todos.filter(todo => todo.id !== todoId)
    }));
  };
  
  changeFilter = (filter) => {
    this.setState({ filter });
  };
  
  getFilteredTodos = () => {
    switch (this.state.filter) {
      case 'active':
        return this.state.todos.filter(todo => !todo.completed);
      case 'completed':
        return this.state.todos.filter(todo => todo.completed);
      default:
        return this.state.todos;
    }
  };
  
  render() {
    const filteredTodos = this.getFilteredTodos();
    
    return (
      <div className="todo-list-container">
        <h2>{this.props.title || 'Todo List'}</h2>
        
        <form onSubmit={this.addTodo}>
          <input
            type="text"
            value={this.state.newTodoText}
            onChange={this.handleInputChange}
            placeholder="Add a new todo..."
          />
          <button type="submit">Add</button>
        </form>
        
        <div className="filters">
          <button 
            className={this.state.filter === 'all' ? 'active' : ''}
            onClick={() => this.changeFilter('all')}
          >
            All
          </button>
          <button 
            className={this.state.filter === 'active' ? 'active' : ''}
            onClick={() => this.changeFilter('active')}
          >
            Active
          </button>
          <button 
            className={this.state.filter === 'completed' ? 'active' : ''}
            onClick={() => this.changeFilter('completed')}
          >
            Completed
          </button>
        </div>
        
        <ul className="todo-list">
          {filteredTodos.length > 0 ? (
            filteredTodos.map(todo => (
              <li key={todo.id} className={todo.completed ? 'completed' : ''}>
                <input
                  type="checkbox"
                  checked={todo.completed}
                  onChange={() => this.toggleTodo(todo.id)}
                />
                <span>{todo.text}</span>
                <button onClick={() => this.deleteTodo(todo.id)}>Delete</button>
              </li>
            ))
          ) : (
            <li className="empty-state">No todos to display</li>
          )}
        </ul>
        
        <div className="todo-count">
          {this.state.todos.filter(todo => !todo.completed).length} items left
        </div>
      </div>
    );
  }
}

export default TodoList;
                

Function Component Version

// src/components/TodoList.js
import React, { useState } from 'react';

function TodoList({ title = 'Todo List', initialTodos = [] }) {
  // State variables
  const [todos, setTodos] = useState(initialTodos);
  const [newTodoText, setNewTodoText] = useState('');
  const [filter, setFilter] = useState('all'); // can be 'all', 'active', or 'completed'
  
  // Event handlers
  const handleInputChange = (e) => {
    setNewTodoText(e.target.value);
  };
  
  const addTodo = (e) => {
    e.preventDefault();
    
    if (!newTodoText.trim()) return;
    
    const newTodo = {
      id: Date.now(),
      text: newTodoText,
      completed: false
    };
    
    setTodos(prevTodos => [...prevTodos, newTodo]);
    setNewTodoText('');
  };
  
  const toggleTodo = (todoId) => {
    setTodos(prevTodos => 
      prevTodos.map(todo => 
        todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };
  
  const deleteTodo = (todoId) => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== todoId));
  };
  
  const changeFilter = (newFilter) => {
    setFilter(newFilter);
  };
  
  // Filtered todos calculation
  const getFilteredTodos = () => {
    switch (filter) {
      case 'active':
        return todos.filter(todo => !todo.completed);
      case 'completed':
        return todos.filter(todo => todo.completed);
      default:
        return todos;
    }
  };
  
  const filteredTodos = getFilteredTodos();
  
  return (
    <div className="todo-list-container">
      <h2>{title}</h2>
      
      <form onSubmit={addTodo}>
        <input
          type="text"
          value={newTodoText}
          onChange={handleInputChange}
          placeholder="Add a new todo..."
        />
        <button type="submit">Add</button>
      </form>
      
      <div className="filters">
        <button 
          className={filter === 'all' ? 'active' : ''}
          onClick={() => changeFilter('all')}
        >
          All
        </button>
        <button 
          className={filter === 'active' ? 'active' : ''}
          onClick={() => changeFilter('active')}
        >
          Active
        </button>
        <button 
          className={filter === 'completed' ? 'active' : ''}
          onClick={() => changeFilter('completed')}
        >
          Completed
        </button>
      </div>
      
      <ul className="todo-list">
        {filteredTodos.length > 0 ? (
          filteredTodos.map(todo => (
            <li key={todo.id} className={todo.completed ? 'completed' : ''}>
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => toggleTodo(todo.id)}
              />
              <span>{todo.text}</span>
              <button onClick={() => deleteTodo(todo.id)}>Delete</button>
            </li>
          ))
        ) : (
          <li className="empty-state">No todos to display</li>
        )}
      </ul>
      
      <div className="todo-count">
        {todos.filter(todo => !todo.completed).length} items left
      </div>
    </div>
  );
}

export default TodoList;