"setState" problem using React

Question

I have a code in React that uses the hook useState in that way:

const [tarefas, setTarefas] = useState([]);

It is a task list code, every time I remove a project I have to update the project of each task, I was trying to do so:

setTarefas(tarefas.map(tarefa => {
    if (tarefa.projeto > id) {
      tarefa.projeto--;
    }
    
    return tarefa;
}

Whereas the id is the id of projeto that is being deleted. The problem is, it does not update the property projeto of tarefa, continues as if that part of the code did not exist. Does anyone have any idea what it might be?

Just before I try to do that, I do the filter in the array by means of that line:

setTarefas(tarefas.filter(tarefa => tarefa.projeto !== id));

What’s really happening is that it doesn’t seem to filter, the tasks don’t fade. It filters only if I take out the method that changes the id.

Answer 1

From the comments, I understood that your doubt is to remove an item from a list, if yes, the example below can facilitate your understanding, example:

function App() {
  const [tarefas, setTarefas] = React.useState([
    {'id': 1, 'desc': 'Tarefa 1'},
    {'id': 2, 'desc': 'Tarefa 2'},
    {'id': 3, 'desc': 'Tarefa 3'},
    {'id': 4, 'desc': 'Tarefa 4'},
    {'id': 5, 'desc': 'Tarefa 5'},
  ])
  const styleListType = {
    listStyleType: "none",
    marginTop: 10
  };
  const onRemove = (id) => {
    setTarefas(tarefas.filter(item => item.id !== id));
  }
  return (
    <div>
      <ul>
      {tarefas && tarefas.map((tarefa, index) => (
        <li style={styleListType}>
          <button onClick={() => onRemove(tarefa.id)}>Excluir</button> 
          {' ' + tarefa.desc}
        </li>)
      )}
      </ul>
    </div>
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

and the method onRemove removes the item from the list with a particular filter.

A few more examples and related issues:

• Doubt about standard React class
• Best Pattern to manage React component status with Hooks
• onClick by Innerhtml React?
• Share state React Hooks
• Displaying data with React JS
• I cannot use defaultProps in React
• Counter does not update data on the page using Reactjs and useState(), only when I place a console.log() can I see the result

Answer 2

The problem is that you need to return a new object with the property changed. In React you should not directly manipulate the state you should calculate a new state based on the current one. Try this way.

setTarefas(tarefas.map(tarefa => {
    let novaTarefa = {...tarefa}
    if (novaTarefa.projeto > id) {
      novaTarefa.projeto--;
    }
    
    return novaTarefa;
})