Question: In state, I have an array of list objects and would like to toggle the displayAddTaskForm. Every time I set state, the list that gets clicked gets rearranged and moves to the front of the lists on the UI. I believe I know why this is happening, just not sure of the solution. When I setState in toggleAddTaskForm, toggledList is first and then the other lists. How do I update the toggledList without changing the order of the lists. Here is the code.

```
this.state = {
      lists: [
        {
          id: 1,
          header: "To Do",
          displayAddTaskForm: false,
        },
        {
          id: 2,
          header: "Working on It",
          displayAddTaskForm: false,
        },
        {
          id: 3,
          header: "Taken Care Of",
          displayAddTaskForm: false,
        }
      ],
      toggleAddTaskForm: (list) => {
        const toggledList = {...list, displayAddTaskForm: !list.displayAddTaskForm}
        const otherLists = this.state.lists.filter(l => l.id !== list.id)
        this.setState({
          lists: [toggledList, ...otherLists]
        })
      },
}

```

Answer: 
You could find the index of the list, copy the lists, and insert the modified list into the new lists array at the same index.

```
toggleAddTaskForm: (list) => {
  const toggledList = {...list, displayAddTaskForm: !list.displayAddTaskForm}
  const newLists = [...this.state.lists];
  newLists[this.state.lists.indexOf(list)] = toggledList;
  this.setState({
    lists: newLists
  })
}

```
This might help.

```js
lists = [{
    id: 1,
    header: "To Do",
    displayAddTaskForm: false,
}, {
    id: 2,
    header: "Working on It",
    displayAddTaskForm: false,
}, {
    id: 3,
    header: "Taken Care Of",
    displayAddTaskForm: false,
}]

const toggle = (list)=>{
    const toggledList = {
        ...list,
        displayAddTaskForm: true
    }
    const indexOfList = lists.findIndex(({id}) => id === list.id)
    const newLists = [...lists]
    newLists[indexOfList] = toggledList
    setState({
        lists: newLists
    })
}

const setState = (o) => console.log(o)

toggle(lists[1])
```