Topic: How to open mdbootstrap modal from different component

Sta Rut free asked 2 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.)

Item.js

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

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

    </Fragment>
);

Modal.js:

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

function toggle(){
  this.setState({
    modal: !this.state.modal
  });
}

return (
  <MDBContainer>
    <MDBModal isOpen={state.modal} toggle={toggle}>
      <MDBModalHeader toggle={toggle}>{props.item.title}</MDBModalHeader>
      <MDBModalBody>
      <h2>Description</h2>
      <p>{props.item.content}</p>
      </MDBModalBody>
      <MDBModalFooter>
        <MDBBtn color="secondary" onClick={toggle}>Close</MDBBtn>
        <MDBBtn color="primary">Save changes</MDBBtn>
      </MDBModalFooter>
    </MDBModal>
  </MDBContainer>
  );

}

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


Piotr Glejzer staff answered 2 years ago


You are using the wrong structure in your components.

https://reactjs.org/docs/state-and-lifecycle.html

Please see a tutorial on how to use class components/states/props in React. If you want to use functional components with states in React you have to use Hooks to do that.

SomeTest.js

import React, { Component } from 'react';
import { MDBBtn } from 'mdbreact';
import Modal from './test';

class SomeTest extends Component {
  state = {
    modal: false
  };

  render() {
    return (
      <>
        <MDBBtn onClick={() => this.setState({ modal: true })}>Modal</MDBBtn>
        <Modal
          toggle={() => this.setState({ modal: false })}
          modal={this.state.modal}
          description='TESTING'
          description1='TESTING description second'
        ></Modal>
      </>
    );
  }
}

export default SomeTest;

test.js

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

class Modal extends Component {
  render() {
    const { toggle, modal, description1, description } = this.props;

    return (
      <MDBContainer>
        <MDBModal isOpen={modal} toggle={() => toggle()}>
          <MDBModalHeader toggle={() => toggle()}>{description}</MDBModalHeader>
          <MDBModalBody>
            <h2>Description</h2>
            <p>{description1}</p>
          </MDBModalBody>
          <MDBModalFooter>
            <MDBBtn color='secondary' onClick={e => toggle()}>
              Close
            </MDBBtn>
            <MDBBtn color='primary'>Save changes</MDBBtn>
          </MDBModalFooter>
        </MDBModal>
      </MDBContainer>
    );
  }
}

export default Modal;

Sta Rut free answered 2 years ago


What do I need to pass in my Modal component so it able to toggle if its open or closed?


Krzysztof Wilk staff answered 2 years ago


Hi!

You forgot about this in your Modal component. Your code should look like this:

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

function toggle(){
  this.setState({
    modal: !this.state.modal
  });
}

return (
  <MDBContainer>
    <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
      <MDBModalHeader toggle={this.toggle}>{props.item.title}</MDBModalHeader>
      <MDBModalBody>
      <h2>Description</h2>
      <p>{props.item.content}</p>
      </MDBModalBody>
      <MDBModalFooter>
        <MDBBtn color="secondary" onClick={this.toggle}>Close</MDBBtn>
        <MDBBtn color="primary">Save changes</MDBBtn>
      </MDBModalFooter>
    </MDBModal>
  </MDBContainer>
  );

Sta Rut free commented 2 years ago

Hello,

Sadly this isn't working either because: http://prntscr.com/utzuvw

My modal.js: https://pastebin.com/isD8UTJe My Item.js: https://pastebin.com/DZ2ghjK8

I've no idea how I can solve this problem.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: 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