Opening modal from click of a different button from parent component

Question

I am fairly new to react and am having an issue. I am using reactstrap to call a modal on click of a button. In reactstrap docs the modal is called on the click of a button in the modal component like so:

import React from 'react';
import { Button, Modal, ModalFooter, ModalHeader, ModalBody } from 'reactstrap';

class SubmitConfirmation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      fade: true,
    };

    this.toggle = this.toggle.bind(this);
  }

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

  

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>
          TOGGLE
        </Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} fade={this.state.fade} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody></ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>
              Do Something
            </Button>{' '}
            <Button color="secondary" onClick={this.toggle}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default SubmitConfirmation;

I want to call the modal from the click of a button in a parent component How do I do this?

export default class SampleApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <div>
                <Button
              
              color="primary"
              size="sm"
              style={{ width: '100%' }}
              onClick={this.toggle} 
              Submit
            </Button>
            </div>
        )
    }
}

How do I call the button from parent component:

Answer 1

You will need to move the state to the parent component to get this functionality,

Parent Component:

import React from "react";
import { Button } from "reactstrap";
import Child from "./Child";

export default class SampleApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modal: false, fade: true };
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState({
      modal: !this.state.modal,
      fade: !this.state.fade
    });
  }

  render() {
    return (
      <>
        <Button
          color="primary"
          size="sm"
          style={{ width: "100%" }}
          onClick={this.toggle}
        >
          Open
        </Button>

        <Child
          modal={this.state.modal}
          toggle={this.toggle}
          fade={this.state.fade}
        />
      </>
    );
  }
}

Child Component

import React from "react";
import { Button, Modal, ModalFooter, ModalHeader, ModalBody } from "reactstrap";

class SubmitConfirmation extends React.Component {
  render() {
    return (
      <Modal
        isOpen={this.props.modal}
        toggle={this.props.toggle}
        fade={this.props.fade}
        className={this.props.className}
      >
        <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
        <ModalBody></ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={this.toggle}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={this.toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    );
  }
}

export default SubmitConfirmation;