Safaricom Todo List Example

import { useState } from 'react';

export default function TodoList () { 
    const [todo, setTodo] = useState('')
    const [todoList, setTodoList] = useState([])

    const addTodo = () => {
        if(!todo) return
        setTodoList([...todoList, { text: todo, completed:false}])
        setTodo('')
    }

    const clickThrough = (i) => {
        const newList = todoList.map((item, index) => {
            if(i === index) return { 
                text: item.text,
                completed: !item.completed
            }
            return item
        })
        setTodoList(newList)
    }

    return (
            <>
                <div>
                    <h2>
                        Todo List
                    </h2>
                    <input value={todo} onChange={(e) => setTodo(e.target.value)} />
                    <button onClick={() => addTodo()}> Add </button>
                </div>
                <p className='task-counter'> {todoList.filter((i) => !i.completed).length} remaining out of {todoList.length} tasks </p>
                <ul>
        {todoList.map((task, index) => (
          <li onClick={() => clickThrough(index)} className={task.completed ? 'is-done' : ''} key={index}>
          {task.text}
          </li>
        ))}
      </ul>
                <style>{`
                    .is-done {
                        text-decoration: line-through;
                    }
                `}</style>
            </>
        );
    }