react multiple modal use import for file - reactjs

Question

I have a grid with 4 buttons, it buttons open different modal
how I separate modal from different file and import
ex: modal client, modal followup, modal calendar
In my grid button, I call different modal
want in a different file because I can use in different grid
grid button
import Client from './clientModal';
import Followup from './followup';
import Calendar from './calendar';

Answer 1

modal form
import {
Button,
ModalBody,
ModalFooter,
ModalHeader,
Col,
Form,
FormGroup,
Input,
Label
} from "reactstrap";
const ModalClients = props => {
this.props = {
modalClient: false,
firstName: null
};
return (
<Form
method="POST"
onChange={this.handleChange}
onSubmit={this.onCreate}
encType="multipart/form-data"
>
<ModalHeader toggleModal={this.toggleClient} className="blue-header">
<i className="cui-people"></i>Clients
</ModalHeader>
<ModalBody>
<FormGroup row className="my-0">
<Col xs="8">
<FormGroup>
<Label htmlFor="firstName">First Name</Label>
<Input
onChange={this.handleChange}
name="firstName"
type="text"
id="firstName"
value={this.props.firstName || ""}
placeholder="Enter First Name"
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" type="submit" onClick={this.toggleClient}>
<i className="cis-check-double-alt"></i> Save
</Button>
<Button
color="secondary"
onClick={() => {
this.toggleClient();
this.resetForm();
}}
>
Cancel
</Button>
</ModalFooter>
</Form>
);
};
export default ModalClients;
file grid with buttons
import ClientModal from './clientModal';
<Modal
isOpen={this.state.info}
toggle={this.toggleInfo}
backdrop="static"
keyboard={false}
className={"modal-lg " + this.props.className}
>
<ClientModal />
</Modal>
buttons
<Row>
<Button className="btn btn-primary" onClick={() => this.toggleInfo(id)}>
<i className="cis-comment-bubble-edit"></i>
</Button>
<Button
className="btn btn-success"
onClick={() => this.toggleClient(id)}
>
</Row>