• Using function factories to initialize state with objects.

import React, { useState } from 'react';

function createTask(title, description, isCompleted) {
  return {
    title,
    description,
    isCompleted,
    toggleComplete() {
      this.isCompleted = !this.isCompleted;
    }
  };
}

function TaskList() {
  const [tasks, setTasks] = useState([
    createTask('Task 1', 'Description 1', false),
    createTask('Task 2', 'Description 2', true)
  ]);

  const toggleTaskCompletion = (index) => {
    const newTasks = [...tasks];
    newTasks[index].toggleComplete();
    setTasks(newTasks);
  };

  return (
    <div>
      {tasks.map((task, index) => (
        <div key={index}>
          <h3>{task.title}</h3>
          <p>{task.description}</p>
          <p>Completed: {task.isCompleted ? 'Yes' : 'No'}</p>
          <button onClick={() => toggleTaskCompletion(index)}>Toggle Complete</button>
        </div>
      ))}
    </div>
  );
}

export default TaskList;