TO CREATE A TODO LIST.
CONSISTS OF AN <input> TAG, A <button> AND AN UNORDERED LIST<ul>
IN WHICH, A TASK IS WRITTEN IN THE INPUT TAG , WHEN THE ADD BUTTON IS CLICKED, IT IS DISPLAYED IN THE UNORDERED LIST.
return (
<>
<input
placeholder="write a task"
onChange={updateChange}
value={newTask}
/>
<button onClick={addTask}>add</button>
<br /> <br />
<br />
<hr />
<ul>
{tasks.map((task) => (
<li>{task}</li>
))}
</ul>
</>
);
HERE THE TASKS ARE STORED IN AN ARRAY.
let [tasks, setTask] = useState([]);
EACH NEW TASK IS STORED IN A newtask VARIABLE.
let [newTask, setNewTask] = useState("");
TO STORE WE USE EVENT OBJECT. THIS EVENT OBJECT CONSISTS OF MANY METHODS AND PROPERTIES. ONE OF SUCH METHOD IS TARGET.
let updateChange = (event) => {
setNewTask(event.target.value);
};
LATER, THIS NEWTASK IS ADDED TO THE TASKS ARRAY.
import { useState } from "react";
export default function Todo() {
let [tasks, setTask] = useState([]);
let [newTask, setNewTask] = useState("");
let addTask = () => {
setTask([...tasks, newTask]);
setNewTask("");
};
let updateChange = (event) => {
setNewTask(event.target.value);
};
return (
<>
<input
placeholder="write a task"
onChange={updateChange}
value={newTask}
/>
<button onClick={addTask}>add</button>
<br /> <br />
<br />
<hr />
<ul>
{tasks.map((task) => (
<li>{task}</li>
))}
</ul>
</>
);
}
SETTING UNIQUE KEY FOR LIST ITEMS
HERE,WE GET AN ERROR,
TO SOLVE THIS WE ASSIGN EACH TASK WITH AN UNIQUE ID.
AS WE HAVE MANY NUMBER OF TASKS , HERE WE ASSIGN EACH TASK WITH A SEPERATE ID.
TO ASSIGN ID'S WE USE uuidv4() PACKAGE. TO INSTALL npm i uuidv4;
import { v4 as uuidv4 } from "uuid";
WE MAKE A FEW CHANGES, WE NOW DEFINE TASKS AS AN OBJECT , AND EACH TASK CONSISTS OF TWO ELEMENTS.
TASK AND ID
let [tasks, setTask] = useState([{ task: "sampleTask", id: uuidv4() }]);
TO DISPLAY EACH OF THE TASK.
<ul>
{tasks.map((task) => (
<li key={task.id}>{task.task}</li>
))}
</ul>
Comments
Post a Comment