Code Along for ReactElements

AI Project Engine Code-Along Discussions
1 
import React, { Component } from 'react';

class TodoApp extends Component {
  constructor() {
    super();
    this.state = {
      tasks: [],
      newTask: '',
    };
  }

  handleChange = (event) => {
    this.setState({ newTask: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    const { tasks, newTask } = this.state;

    if (newTask.trim() !== '') {
      const updatedTasks = [...tasks, newTask];
      this.setState({ tasks: updatedTasks, newTask: '' });
    }
  };

  handleDelete = (index) => {
    const { tasks } = this.state;
    const updatedTasks = [...tasks.slice(0, index), ...tasks.slice(index + 1)];
    this.setState({ tasks: updatedTasks });
  };

  render() {
    const { tasks, newTask } = this.state;

    return (
      <div>
        <h2>Todo List</h2>

        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={newTask}
            onChange={this.handleChange}
            placeholder="Add a new task"
          />
          <button type="submit">Add</button>
        </form>

        <ul>
          {tasks.map((task, index) => (
            <li key={index}>
              {task}
              <button onClick={() => this.handleDelete(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default TodoApp;