Todo List with useState - React Typing CST Test

Todo List with useState — React Code

Simple Todo list with add, remove, and toggle completion using useState.

import React, { useState } from 'react';

const TodoApp = () => {
	const [todos, setTodos] = useState([]);
	const [task, setTask] = useState('');
	const addTodo = () => setTodos([...todos, { task, completed: false }]);
	const toggleTodo = index => {
		const newTodos = [...todos];
		newTodos[index].completed = !newTodos[index].completed;
		setTodos(newTodos);
	};
	return (
		<div>
		<input value={task} onChange={e => setTask(e.target.value)} />
		<button onClick={addTodo}>Add</button>
		<ul>{todos.map((todo, i) => <li key={i} onClick={() => toggleTodo(i)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.task}</li>)}</ul>
		</div>
	);
};

export default TodoApp;

React Language Guide

React is a declarative, component-based JavaScript library for building user interfaces, primarily for single-page applications. It allows developers to create reusable UI components and manage application state efficiently.

More React Typing Exercises

Practice Other Languages