feat(task): add functionality to create new tasks using controlled input

This commit is contained in:
2026-04-27 14:09:45 +02:00
parent fe7bbfbedb
commit 38182aa402
+24
View File
@@ -3,11 +3,35 @@ import type { Task } from "./assets/types/task";
function App() { function App() {
const [tasks, setTasks] = useState<Task[]>([]); const [tasks, setTasks] = useState<Task[]>([]);
const [inputValue, setInputValue] = useState<string>('');
const addTask = () => {
if (inputValue.trim() === '') return;
const newTask: Task = {
id: Date.now(),
title: inputValue,
completed: false,
createdAt: new Date().toISOString()
};
setTasks([...tasks, newTask]);
setInputValue('');
};
return ( return (
<div className="container"> <div className="container">
<h1>SmartX Task Manager</h1> <h1>SmartX Task Manager</h1>
<div className="input-group">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={addTask}>Add</button>
</div>
<div className="task-list"> <div className="task-list">
{tasks.length === 0 ? ( {tasks.length === 0 ? (
<p>No task found. Lets add!</p> <p>No task found. Lets add!</p>