feat(task): add functionality to create new tasks using controlled input
This commit is contained in:
+24
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user