Scribd
Upload
4 views

Practical 2 ToDoList VSCodeStyle

The document contains a React component for a To-Do List application. It allows users to add and delete tasks using state management with hooks. The component renders an input field, an add button, and a list of tasks with delete options for each task.

Uploaded by

sheetaldankher
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Practical 2 ToDoList VSCodeStyle

The document contains a React component for a To-Do List application. It allows users to add and delete tasks using state management with hooks. The component renders an input field, an add button, and a list of tasks with delete options for each task.

Uploaded by

sheetaldankher
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Practical No.

2 - To-Do List App (VS Code Style)

import React, { useState } from 'react';

function App() {
const [task, setTask] = useState('');
const [tasks, setTasks] = useState([]);

const addTask = () => {


if (task) {
setTasks([...tasks, task]);
setTask('');
}
};

const deleteTask = (index) => {


setTasks(tasks.filter((_, i) => i !== index));
};

return (
<div>
<h2>To-Do List</h2>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
/>
<button onClick={addTask}>Add</button>
<ul>
{tasks.map((t, i) => (
<li key={i}>
{t} <button onClick={() => deleteTask(i)}>Delete</button>
</li>
))}
</ul>
</div>
);
}

export default App;

Page 1

You might also like