我如何将 setState 中的数据传递给模态 REACTJS

Question

How can i pass my tabledata to my modal, im doing edit function

<button className="btn btn-info btn-icon btn-circle btn-md m-r-2 float-right" onClick={() => 
    this.toggleModal("modalWithoutAnimation", tabledata)
    );}}><i className="fa fa-edit"></i>
</button>

heres my modal, i added the this.state.modalWithoutAnimation

{this.state.modalWithoutAnimation && <Modal isOpen={this.state.modalWithoutAnimation} fade={false} toggle={() => this.toggleModal("modalWithoutAnimation")}>
                    <ModalHeader toggle={() => this.toggleModal("modalWithoutAnimation")}>
                        Edit Department
                    </ModalHeader>
                    <form className="margin-bottom-0" onSubmit={this.handleEdit}>
                        <ModalBody>

                        <h3><label className="control-label">Module Information </label></h3>
                            <div className="row row-space-10">

                                <div className="col-md-4 m-b-15">
                                    <label className="control-label">Module Name <span className="text-danger">*</span></label>
                                    <input type="text" className="form-control" placeholder="Module Name" name="moduleName" value={this.state.moduleName} onChange={this.handleChange} required="" />
                                </div>
                                <div className="col-md-4 m-b-15">
                                    <label className="control-label">Course <span className="text-danger">*</span></label>
                                    <input type="text" className="form-control" placeholder="Course" name="courseId" defaultValue={localcourseid} onChange={this.handleChange} required="" />
                                </div>

                                <div className="col-md-4 m-b-15">
                                    <label className="control-label">Sequence Number <span className="text-danger">*</span></label>
                                    <input type="text" className="form-control" placeholder="Sequence Number" name="sequenceNo" value={this.state.sequenceNo} onChange={this.handleChange} required="" />
                                </div>
                            </div>
                        </ModalBody>
                        <ModalFooter>
                            <button onClick={(e) => {
                                this.handleEdit(e, this.state.id)
                                console.log(this.state.id)
                                this.addNotification('success', 'Success', 'All data has been successfully saved', 'bottom-right')
                                this.toggleModal("modalWithoutAnimation")
                            }} className="btn btn-sm btn-success">Save Edit</button>

                            <button
                                className="btn btn-white btn-sm"
                                onClick={() => this.toggleModal("modalWithoutAnimation")} >
                                Close
                        </button>
                        </ModalFooter>
                    </form>
                </Modal>
                }

here's the state together with the function togglemodal cant seem to display the this.state.moduleName etc. Im totally lost but in my console log i can display state of the clicked data

this.state = {
                error: null,
                isLoaded: false,

                modalDialog: false,
                modalWithoutAnimation: false,
                modalMessage: false,
                modalAlert: false,

                    id:'',
                    moduleName:'',
                    courseId:'',
                    sequenceNo:'',
        }
        //binded elements
        this.toggleCollapse = this.toggleCollapse.bind(this);
        this.toggleModal = this.toggleModal.bind(this);
        this.toggleSweetAlert = this.toggleSweetAlert.bind(this);
        this.addNotification = this.addNotification.bind(this);
        this.notificationDOMRef = React.createRef();

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
        this.handleEditChange = this.handleEditChange.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handletoggleClose = this.handletoggleClose.bind(this);

    }

//event for toggling modal
    toggleModal(name, tabledatas) {

        switch (name) {
            case 'modalDialog':
                this.setState({ modalDialog: !this.state.modalDialog });
                break;
            case 'modalWithoutAnimation':
                this.setState({ modalWithoutAnimation: !this.state.modalWithoutAnimation,
                    state:tabledatas
                });
                break;
            case 'modalMessage':
                this.setState({ modalMessage: !this.state.modalMessage });
                break;
            case 'modalAlert':
                this.setState({ modalAlert: !this.state.modalAlert });
                break;
            default:
                break;
        }
    }

Answer 1

Enable model popup only on click, save data to state and pass to model popup like this-

<button className="btn btn-info btn-icon btn-circle btn-md m-r-2 float-right" 
  onClick={()=>this.handleToggle(tabledata)}><i className="fa fa-edit"></i>
</button>

function handleToggle

handleToggle=data=>{
    this.setState({state:data, toggle:true })    
}

jsx

      {this.state.toggle && <Modal>
               <h3><label className="control-label">Module Information </label></h3>
                        <div className="row row-space-10">

                            <div className="col-md-4 m-b-15">
                                <label className="control-label">Module Name <span className="text-danger">*</span></label>
                                <input type="text" className="form-control" placeholder="Module Name" name="moduleName" value={this.state.moduleName} onChange={this.handleChange} required="" />
                            </div>
                            <div className="col-md-4 m-b-15">
                                <label className="control-label">Course <span className="text-danger">*</span></label>
                                <input type="text" className="form-control" placeholder="Course" name="courseId" defaultValue={localcourseid} onChange={this.handleChange} required="" />
                            </div>

                            <div className="col-md-4 m-b-15">
                                <label className="control-label">Sequence Number <span className="text-danger">*</span></label>
                                <input type="text" className="form-control" placeholder="Sequence Number" name="sequenceNo" value={this.state.sequenceNo} onChange={this.handleChange} required="" />
                            </div>
                        </div>
                    </ModalBody>
                    <ModalFooter>
                        <button onClick={(e) => {
                            this.handleEdit(e, this.state.id)
                            console.log(this.state.id)
                            this.addNotification('success', 'Success', 'All data has been successfully saved', 'bottom-right')
                            this.toggleModal("modalWithoutAnimation")
                        }} className="btn btn-sm btn-success">Save Edit</button>

                        <button
                            className="btn btn-white btn-sm"
                            onClick={() => this.toggleModal("modalWithoutAnimation")} >
                            Close
                    </button>
                    </ModalFooter>
                </form>
            </Modal>}