Build custom Modal Component in React.

Chisom Okoye

create new React Application:

import React, { Component } from "react";import { ModalWrapper, ModalBoxSetup, ModalBg } from "../GeneralStyle";import PropTypes from "prop-types";/*visible: boolean,dismiss: function on click on Close.*/export default class ModalSetup extends Component {     static propTypes = {         visible: PropTypes.bool.isRequired,         dismiss: PropTypes.func.isRequired      };render() { const { visible, dismiss, children, client } = this.props;   return (         <React.Fragment>            {visible ? (              <ModalWrapper>                  <ModalBoxSetup width={client}>{children} </ModalBoxSetup>                 <ModalBg onClick={dismiss} />             </ModalWrapper>            ) : null}         </React.Fragment>     );    }}
import styled from "styled-components";
import { color } from "../color";
export const ModalWrapper = styled.div`position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1050;
display: flex;
align-items: baseline;
`;export const ModalBoxSetup = styled.div`position: absolute;
left: 0;
right: 0;
width: ${props => props.width || "32%"}
overflow:hidden;
padding:16px;
margin: 50px auto;
box-sizing:border-box;
z-index:1;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
background:${color.white};
border: 0.5px solid #E8E8E8;
`;export const ModalBg = styled.div`width: 100vw;
height: 100vh;
z-index: 0;
background: rgba(0, 0, 0, 0.5);

Explanation of the modal component

import React, {Component} from ‘react’; //the custom modal component 
import ModalSetup from "../../components/Modal/ModalSetup";
// modal content for the New job
import AddNewJob from "./_partials/addNewJob";
class Dashboard extends Component {

state={isModalOpen: false}

handleModalOpen =()=> {
isModalOpen: !this.state.isModalOpen
}
dismissable =()=> {
this.setState({
isModalOpen: false})
}
render(){
const {isModalOpen} = this.state;
let children;
if(isModalOpen){
children =(
<AddNewJob />
);
}
return (
<div>
<button onClick={this.handleModalOpen}>New Job</button>
<ModalSetup
visible={isModalOpen}
dismiss={this.dissmissable}
children={children}
/>
</div> );
}
}

Modal content

return (<div>
<h2>Create new job</h2>
<p id=”login-title”>All fields are required to create a job</p>
<Form>
<div className=”modal-container row”>
<div id=”select-wrapper” style={{ marginBottom: “16px” }
<Select
style={{
width: “100%”,
height: “48px”,
background: “rgba(107,126,172,0.05)”,
padding: “10px”,
border: “none”,
fontSize: “14px”}}
name=”client”

onChange={e => this.getSelectedClient(e)} >
<OptionsStyle value=”” disabled selected>Select Client
</OptionsStyle>
{clientContent}

</Select>
</div>

.....
.....
....
<div className="modal-container row"><InputPassword type="number" placeholder="Expected asset count" name="ExpectedAssetCount" onChange={this.props.handleChange} style={{ border: "none", width: "195px" }} /><div id="select-wrapper">
<Select style={{ width: "100%", height: "48px", background: "rgba(107,126,172,0.05)", padding: "10px", border: "none", marginBottom: "16px", fontSize: "14px" }}
name="site" onChange={e => this.getSelectedQA(e)} >

<OptionsStyle value="" disabled selected>Assign QA personnel
</OptionsStyle>

{QAdata}
</Select>
</div>
</div> <ButtonSetup onClick={this.handleNewJob} width="100%">Create job
</ButtonSetup>
</Form>
</div>