Topic: How to open mdbootstrap modal from different component

Sta Rut free asked 3 years ago

Hello, I really tried to do it on myself but i'm new to react so I dont really understand how to pass it so it opens the modal.

I'm sure there is an easy fix for this, but for some reason I wasn't able to get this working I hope someone can help me with this would really appreciate it

Expected behavior When I click on one of the items it opens a modal.

Actual behavior Gives me errors TypeError: Cannot read property 'toggle' of undefined

Resources (screenshots, code snippets etc.)


    return (
            style={{ opacity: isDragging ? 0 : 1 }}
            <div className={"color-bar"} style={{ backgroundColor: status.color }}/>
            <p className={"item-title"}>{item.content}</p>
            <p className={"item-status"}>{item.icon}</p>

        <Modal item={item}  toggle={this.toggle} />



export default function Modal(props){
const state = {
  modal: false

function toggle(){
    modal: !this.state.modal

return (
    <MDBModal isOpen={state.modal} toggle={toggle}>
      <MDBModalHeader toggle={toggle}>{props.item.title}</MDBModalHeader>
        <MDBBtn color="secondary" onClick={toggle}>Close</MDBBtn>
        <MDBBtn color="primary">Save changes</MDBBtn>


When I click on this Item I want it to open my Modal: enter image description here

Krzysztof Wilk staff commented 3 years ago


I answered you here

Best regards


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.27.0
  • Device: Windows 10
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No