Topic: How to open mdbootstrap modal from different component

Sta Rut free asked 3 years ago

Hello, i'm sure there is an easy and quick fix for this. But I really tried but I wasn't able to get this working. I'm new to React and mdbootstrap so that's probably the reason why.

I hope someone can help me with this wich i would really appreciate

Expected behavior Open the modal

Actual behavior Doesn't open the modal

Resources (screenshots, code snippets etc.) My item.js

    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} />


My Modal.js

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>


How my item.js looks enter image description here

Krzysztof Wilk staff commented 3 years ago


I answered you here

Best regards

Please insert min. 20 characters.


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: General Bootstrap questions
  • MDB Version: -
  • Device: Windows 10
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No