So I'm still learning React and I'm trying to use it to remove an item from a "to do list". Here is the code:
import { Item } from '../../types/item';
import { useState } from 'react';
type Props = {
item: Item
}
export const ListItem = ({ item }: Props) => {
const [isChecked, setIsChecked] = useState(item.done);
return (
<C.Container done={isChecked}>
<input
type="checkbox"
checked={isChecked}
onChange={e => setIsChecked(e.target.checked)}
/>
<button onClick={removeItem}><img src="./remove"/></button>
<label>{item.name}</label>
</C.Container>
);
}
This button should call the function removeItem that will... remove the item haha. Any suggestions?
I suggest you to use a functional component with useState hook. Create a state with initial value to be an empty array. then create a function which on click with update the value in state, it canbe done using useState hook. Simply enter setTodo(). This will create a new entry in your state. You can use array methods to add the returned value from function which is triggered onclick, too delete an entry, simply use a filter method, you can look more about it on w3school, it provides good examples which are easy to understand by biggeners.