import { useState } from "react";
import { Item } from "../types/type";
import { v4 as uuid } from "uuid";
interface Props {
items: Item[];
setItems: React.Dispatch<React.SetStateAction<Item[]>>;
}
const InsertItem = ({ items, setItems }: Props) => {
const [itemName, setItemName] = useState("");
const changeItemName = (e: React.ChangeEvent<HTMLInputElement>) => {
setItemName(e.target.value);
};
const clickButton = (e: React.MouseEvent<HTMLButtonElement>) => {
setItems([...items, { itemId: uuid(), itemName, clear: false }]);
setItemName("");
console.log(itemName);
};
return (
<>
<input
className="task-input"
value={itemName}
onChange={changeItemName}
type="text"
/>
<button className="button-add" onClick={clickButton}>{`추가하기`}</button>
</>
);
};
export default InsertItem;
import { Item } from "../types/type";
interface Props {
items: Item[];
setItems: React.Dispatch<React.SetStateAction<Item[]>>;
}
const ItemList = ({ items, setItems }: Props) => {
const clickDelete = (data: Item) => {
setItems(items.filter((item: Item) => item.itemId !== data.itemId));
};
const clickComplete = (data: Item) => {
setItems(
items.map((item: Item) => {
if (item.itemId === data.itemId) {
return { ...item, clear: !item.clear };
}
return item;
})
);
};
return (
<ul>
{items.map((data: Item) => {
return (
<li className="list-item" key={data.itemId}>
<p className={`${data.clear ? "complete" : ""}`}>{data.itemName}</p>
<div>
<button
className="button-delete"
onClick={() => clickDelete(data)}
>{`삭제하기`}</button>
<button
className="button-complete"
onClick={() => clickComplete(data)}
>{`완료`}</button>
</div>
</li>
);
})}
</ul>
);
};
export default ItemList;