Как открыть всего одно модальное окно?

Question

[lenox94]

При нажатии на один тригер-card открывается столько модальных окон, сколько тригеров-card есть в маcсиве, а хотелось бы одно открыть, как это сделать?

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

[0xD34F]

Пусть modalOpen будет не boolean, а число - индекс открытого окна.

Или, вместо состояния открытости окон храните данные для них - а окно будет одно. Данные есть - окно показывается.

Comments

[lenox94]

нет разницы, все равно это значение будет true для каждого модального окна

[0xD34F]

lenox94, не будет. Надо в качестве значения open передавать не сохранённый индекс, а результат его сравнения с текущим - так true будет не более одного.

[lenox94]

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

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

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

0xD34F, что я делаю не так?(

[0xD34F]

lenox94,

onClick={(i)=>this.handleOpen(i)}

Вам кажется, что i здесь - это индекс. Мне кажется другое - что это объект события клика. Пусть список параметров будет пустым: onClick={()=>this.handleOpen(i)}.

[lenox94]

0xD34F, получилось, Спасибо вам ОГРОМЕЗНОЕ!