How to open only one modal window?

Question

React

When you click on one card-trigger, as many modal windows open as there are card-triggers in the array, but I would like to open one, how can I do this?

var arr = [{src: check, text: "#1111111" },{src: check, text: "#222222"},{src: check, text: "#33333"}]
export default class Menu extends Component {

    state = {
        modalOpen: false
    }

handleOpen = () => this.setState({ modalOpen: true })

handleClose = () => this.setState({ modalOpen: false })

renderCards = () => {
        return arr.map((item, i) => {
            return(
                <Modal open={this.state.modalOpen}
                             dimmer="inverted"
                             onClose={this.handleClose}
                             key={i}
                             trigger={
                                 <Card onClick={this.handleOpen}>
                                      <Image src={item.src} />
                                    <Text grey medium fontSize="12px">{item.text}</Text>
                                </Card>}>
                                    <ModalContent data={item.text}  onClose={this.handleClose.bind(this)}/>
                </Modal>
            )
        })
    }

 render(){
        return( <Fragment>
 {this.renderCards()}
 </Fragment> )
    }
}

Answer 1

Let modalOpen be not a boolean, but a number - the index of the open window.
Or, instead of the open state of windows, store data for them - and the window will be one. There is data - the window is displayed.