Modal Components using ReactStrap - reactjs

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