Pass item data to a react modal

Question

I have a map that render few items and one of its line is below

 this.setState({\"openDeleteModal\":true)}>Delete

Answer 1

When working on React applications, try not to think in terms of passing values to other components, but rather updating state that your components are exposed to. In your example, assuming your modal component is a child of the same component your list of a tags belongs to, you could set the values you are interested in exposing to the modal on the state, as well as updating the property that signals whether the modal is open or not. For example:

class Container extends React.Component {
    constructor(props) {
       super(props)
       this.state = {
          openDeleteModal: false,
          activeItemName: '', //state property to hold item name
          activeItemId: null, //state property to hold item id
       }
    }

    openModalWithItem(item) {
       this.setState({
          openDeleteModal: true,
          activeItemName: item.name,
          activeItemId: item.id
       })
    }

    render() {

    let buttonList = this.props.item.map( item => {
      return ( this.openModalWithItem(item)}>{item.name}
    });

    return (
     

        {/* Example Modal Component */}
        
        { buttonList }
     
    )
    }
}