在React中重用模态

Question

I have a very simple modal that I want to reuse to display dynamic data

class Modal extends Component {

    constructor(props) {
        super(props)
        this.handleKeyDown = this.handleKeyDown.bind(this);
        this.handleCloseModal = this.handleCloseModal.bind(this);
    }

    handleKeyDown(event) {
        if (event.key === 'Escape') {
            this.handleCloseModal()
        }
    }

    handleCloseModal() {
        // What should I do here? Unmount?
    }

    componentDidMount() {
        document.addEventListener('keydown', this.handleKeyDown, false);
    }

    render() {

        return(

            <div className="modal">
                <button onClick={() => this.handleCloseModal()}>close modal</button>
                {this.props.children}
            </div>

        )
    }
}

export default Modal

I would like to open the modal with the data from elem.description for each elem in the records array.

{records.map(function(elem, index) {
    return <button 
            key={index} 
            onClick={// Something like <Modal>{elem.description}</Modal>} 
        /> open modal for {elem.name}</button>
})}

I read about some implementations that will do something like

<Modal show=true>...</modal>

and toggle the visibility of it. can i Just Unmount the component? is that aa good practice?

Answer 1

One way of doing that is to save the clicked element in the state and then, when it is clicked display the modal.

{records.map(function(item, index) {
    return <button 
            key={index} 
            onClick={this.openModal(item)} // open modal and set the current item in the state
        /> open modal for {elem.name}</button>
})}

You need a function to set the element as current and open the modal

openModal = (item) =>() => {
 this.setState({currentItem:item, isModalVisible: true})
}

Finally in your modal just pass an item component as chidlren and give it data coming from the state

<Modal isVisible={this.state.isModalVisible}>
  <MyItem data={this.state.currentItem} />
</Modal>