Scribd
Upload
70 views1 page

React Todo List Component Guide

Uploaded by

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

React Todo List Component Guide

Uploaded by

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

import React, { useState, useEffect } from "react";

const TodoList = () => {


const [items, setItems] = useState([]);
const [input, setInput] = useState("");

useEffect(() => {
[Link]("TodoList mounted");
return () => [Link]("TodoList unmounted");
}, []);

const addItem = () => {


if ([Link]()) {
setItems([...items, input]);
setInput("");
}
};

const removeItem = (index) => {


setItems([Link]((_, i) => i !== index));
};

return (
<div>
<input
value={input}
onChange={(e) => setInput([Link])}
placeholder="Add a task"
/>
<button onClick={addItem}>Add</button>
<ul>
{[Link]((item, index) => (
<li key={index}>
{item} <button onClick={() => removeItem(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};

export default TodoList;

You might also like