Modal Components using ReactStrap

Question

Currently I have a single Component (Logbook.js) that has a table of logs, each with a unique key. When I click on the table row a modal displays the data of that row in a modal. From this modal, when I click update another modal appears and the data is neatly displayed in a form ready to update. I want to separate these modals into separate components, DisplayModal.js and UpdateModal.js. How can I do this so that the data contained in the row is carried to reach component?

Answer 1

This can give you an idea where to start:

const { Button, Modal, ModalHeader, ModalBody, ModalFooter } = Reactstrap;

class Modal1 extends React.Component {
  render() {
    return (
        <React.Fragment>
          <ModalHeader toggle={this.toggle}>{this.props.title}</ModalHeader>
          {this.props.children}
        </React.Fragment>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      modalType: 1
    };

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

  changeModalType(type) {
    this.setState({modalType: type});
  }
  
  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }
  
  renderDisplayModal() {
  return(
  <React.Fragment>
          <ModalBody>
              This is display modal
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={() => this.changeModalType(2)}>Open Update Modal</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
          </React.Fragment>
  );
  }
  
  renderUpdateModal() {
    return(
  <React.Fragment>
          <ModalBody>
              This is update modal
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={() => this.changeModalType(1)}>Open Display Modal</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
          </React.Fragment>
    );
  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>Open</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <Modal1 click={this.toggle} title={this.state.modalType === 1 ? 'Display title' : 'Update Modal'}>
            {this.state.modalType === 1
              ? this.renderDisplayModal()
              : this.renderUpdateModal()
            }
          </Modal1>
        </Modal>
      </div>
    );
  } 
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">
<div id="root" />