React modal always take the last element of map function

Question

I am currently creating a React todo application. So basically I have two component TodoList and TodoItem

TodoList component will receive an array of objects consisti

Answer 1

You're using the same variable to determine all of the TodoItem's open state. The result is it appears that it is only taking the last value from the array, but really each modal is opening at once and the last one is the only visible modal.

// editItem here is used to determine the open state of both modals
const { items, editItem } = this.props.todo 
...
{
  items.map((item, index) => {
    const editedTitle = item.title
    return (
      
    )
  })
}

...

let { editItem } = this.props
             // All will open and close at the same time

Instead, use a different flag, or just manage the open state in each child like this:

 this.setState({open: true})} >
  


...