48 lines
1.2 KiB
React
48 lines
1.2 KiB
React
import React, { useMemo, useCallback, useState } from 'react'
|
|
|
|
const TodoItem = React.memo(({ item, onToggle, onDelete }) => {
|
|
console.log(`rendred ${item.id}`);
|
|
return <li>
|
|
{item.name}
|
|
<button onClick={() => onToggle(item.id)}>Done</button>
|
|
<button onClick={() => onDelete(item.id)}>remove</button>
|
|
</li>
|
|
})
|
|
|
|
function ItemList({ items }) {
|
|
|
|
const handleToggle = useCallback(id => {
|
|
items.done = true;
|
|
console.log(`Item ${id} done`)
|
|
console.log(id)
|
|
},[]);
|
|
|
|
const handleDelete = useCallback(id => {
|
|
items.pop(id);
|
|
},[]);
|
|
return (
|
|
<>
|
|
<h3>List items</h3>
|
|
{items.map(item => (
|
|
<TodoItem key={item.id} item={item}
|
|
onToggle={handleToggle} onDelete={handleDelete} />
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<>
|
|
{/* Добавьте тестовый контент для проверки */}
|
|
<h1>Hello, React!</h1>
|
|
<ItemList items={[
|
|
{id:1,name:'Первый',done:false},
|
|
{id:2,name:'Второй',done:false}
|
|
]} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default App
|