No entiendo por qué .filter elimina todos los elementos en lugar de uno, aunque la clave debería ser única. ¿Por qué? Creo que debería filtrar la identificación que está en la función, pero sigue eliminando todo, debido al .map, ¿verdad?
const App = () => { const [state, setState] = useState("") const [list, updateList] = useState([]) const addItem = () => { list.push(state) setState('') updateList(list) } const removeItem = (id) => { updateList(list.filter((item) => item.id !== id)); } return ( <div> <input placeholder='type...' value={state} onChange={(e) => setState(e.target.value)}></input> <button onClick={addItem}>Submit</button> {list.map((item) => ( <> <div key={item.id}>{item}</div> <button onClick={() => removeItem(item.id)}>delete</button> </> ) )} </div> ) } export default AppEn realidad, no tiene item.id , solo tiene un elemento que es una cadena. Agrega elementos a esa matriz desde el cuadro de texto, por lo que solo tiene una Array of strings
Lo que debe hacer es eliminar por item no por item.id
su código debería ser algo así como la función remoteItem:
const removeItem = (selectedItem) => { updateList(list.filter((item) => item !== selectedItem));};
Luego en tu list.map
{list.map((item) => ( <> <div key={item}>{item}</div> <button onClick={() => removeItem(item)}>delete</button> </> ))}