Remove All from a list

Question

My function of removing All is only removing the first Element that has been added to all.

const handleRemoveItem = useCallback(() => {
    setTodos(todos.slice(todos.indexOf(+1)));
}, [todos]);


{todos.map((todo, index) => (
<>
    <Icon src={IconClose} onClick={handleRemoveItem} />
    <Card key={index}>
    <p>{todo.regiao}</p>
    <div>
        <p>Código do Representante:</p>
        <span>{todo.codRepresentante}</span>
    </div>
    </Card>
</>
))}

Answer 1

Missed what object crave rule out of the list and the correct method is splice that removes the item from the list, and Slice returns you parts of a array and it’s not what you need. There are other ways to do this, but I will follow your current example:

function App() {
  const [todos, setTodos] = React.useState([
    {codRepresentante: 1, regiao: 'Região 1'},
    {codRepresentante: 2, regiao: 'Região 2'},
    {codRepresentante: 3, regiao: 'Região 3'},
  ]);
  const handleRemoveItem = React.useCallback((todo) => {
    let newTodos = [...todos];
    newTodos.splice(todos.indexOf(todo), 1)
    setTodos(newTodos);
  }, [todos]);
  return (
    <div>
      {todos && todos.map(todo => 
        (
          <div>
            {todo.codRepresentante} - {todo.regiao} { ' ' }
            <button onClick={e => handleRemoveItem(todo)}>Remover</button>
          </div>
        )
      )}
    </div>
  )
}
ReactDOM.render(<App />, document.querySelector('#root'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>