I am trying to call a Modal function. When I click to view it, it doesn't render and the page goes blank(white).
This is the code for
BootstrapModal :
class BootstrapModal extends React.Component{
constructor(){
super();
this.state = {
showHide : false
}
}
handleModalShowHide() {
console.log("hitting");
this.setState({ showHide: !this.state.showHide })
}
render(){
return(
<div>
<Button variant="third" id="btn-third" onClick={() => this.handleModalShowHide()}>
Send Email
</Button>
<Modal show={this.state.showHide}>
<Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
<Modal.Title>Email Chart To User</Modal.Title>
</Modal.Header>
<Modal.Body>
<FormGroup>
<Modal.Label>Email address</Modal.Label>
<Modal.Input
type="email"
placeholder="Email"
/>
</FormGroup>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => this.handleModalShowHide()}>
Cancel
</Button>
<Button variant="primary" onClick={() => this.handleModalShowHide()}>
Send
</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
export default BootstrapModal;
Any ideas on why this is happening? Any suggestions would be gladly appreciated.
I think your problem is that you have not binded the handleModalShowHide() function. You can aviod having to do thst using an arrow function:
handleModalShowHide = () => {
Code here
}
I had to change
<FormGroup>
<Modal.Label>Email address</Modal.Label>
<Modal.Input
type="email"
placeholder="Email"
/>
</FormGroup>
To
<FormGroup>
<label for="message-text" class="col-form-label">Email Adress:</label>
<input type="text" class="form-control" id="recipient-name"></input>
</FormGroup>
After changing this, the Modal successfully rendered.
Related
I have the following code of a child component which is sending the form values to the parent when a user clicks .
Save and Continue button
Submit button
The Save and Continue button in the code is defined as follows:
<div className="form-field">
<Button size="large" variant="contained" color="primary" style={{marginLeft: '5px'}} type="submit">Save & Continue</Button>
</div>
When a user clicks Save and Continue button, I want to return requestStatuses: props.SimpleRequest && props.SimpleRequest.statusId || '10',.
However, when a user clicks the following Submit button:
<Button size="large" variant="contained" color="primary"
type="submit">Submit</Button>
I want to return props.SimpleRequest && props.SimpleRequest.statusId || '6',.
The default value for Status is 6 when a user interacts with the form and the dropdown is disabled so user can't change it. However, I want to send different values of it as I explained above based on different button clicks. Is it possible?
Minimal Code with relavent Formik form information is below:
const SimpleRequestForm = (props) => {
const {values, setFieldValue, touched, errors, isSubmitting, handleReset, handleChange} =
props;
const growl = React.createRef()
return (
<div>
<div id="formDiv">
<Growl ref={growl}/>
<Form className="form-column-3">
<div className="SimpleRequest-form">
<div className="form-field">
<CustomSelectField name="requestStatuses" disabled type="select" placeholder="Status"/>
</div>
<div className="form-field">
<CustomSelectField name="requestPrioritieses" type="select" value='Normal' placeholder="Priority"/>
</div>
<div className="form-field">
<CustomSelectField name="assignees" type="select" placeholder="Assignee"/>
</div>
<div className="form-field">
<Button size="large" variant="contained" color="primary" style={{marginLeft: '5px'}} type="submit">Save & Continue</Button>
</div>
</div>
<div className="btn-group-right">
<Button size="large" variant="contained" color="primary"
type="submit">Submit</Button>
<Button size="large" variant="contained" color="primary" onClick={handleReset}
style={{marginLeft: '5px'}} type="button">Reset</Button>
<Button size="large" variant="contained" color="primary" onClick={props.onCancel}
style={{marginLeft: '5px'}} type="button">Cancel</Button>
</div>
</Form>
</div>
</div>
)
};
export const SimpleRequestEnhancedForm = withFormik(
{
mapPropsToValues: props => {
return {
requestId: props.SimpleRequest && props.SimpleRequest.requestId || '',
requestStatuses: props.SimpleRequest && props.SimpleRequest.statusId || '6',
requestPrioritieses: props.SimpleRequest && props.SimpleRequest.priorityId || '3',
assignees: props.SimpleRequest && props.SimpleRequest.assigneeId || '',
}
},
validationSchema:validationSchema,
handleSubmit(values, {props, resetForm, setErrors, setSubmitting}) {
console.log("submit Simple Request Form....")
values.assets = JSON.parse(sessionStorage.getItem('uploadedFiles'));
props.handleSubmit(values)
setSubmitting(false)
},
setFieldValue(field, value, shouldVal) {
console.log('In setFieldValue')
},
displayName: 'Simple Request Form',
})(SimpleRequestForm)
I created a project using React and Bootstrap Table. Opening of modal is functional but unfortunately all the data in the table also opens their own modal.
So example I have 5 data in the table, when updating a row, the other four (4) modal also rendered and display.
The id of the data from Firestore is accessible to the child component (Edit_Modal.tsx) is there a way to add an id for the modal to make a reference to the data?
Manuscript.jsx
<tbody>
{thesisData.map((doc, index) => {
return (
<tr key={doc.id}>
<td>{index + 1}</td>
<td>{doc.title}</td>
<td>
{doc.members[0]}, {doc?.members[1]}
</td>
<td>{doc.adviser}</td>
<td>{doc.course}</td>
<td>{doc.pages}</td>
<td className="m-1 text-center">
<Button
className="mb-1"
variant="secondary"
onClick={(e) => openUpdateModal(doc.id, e)}
>
<IconContext.Provider value={{ color: "#fff" }}>
<div>
<BsFillPencilFill />
</div>
</IconContext.Provider>
{showModalEdit && <Edit_Modal modalToggle={doc.id} />}
</Button>
<Button
className="mb-1"
variant="danger"
onClick={(e) => deleteHandler(doc.id)}
>
<IconContext.Provider value={{ color: "#fff" }}>
<div>
<BsFillTrashFill />
</div>
</IconContext.Provider>
</Button>
</td>
</tr>
);
})}
</tbody>
openUpdateModal() function
const openUpdateModal = (id) => {
setThesisId(id);
setShowModalEdit(true);
};
Edit_Modal.tsx
const Edit_Modal = ({ modalToggle }) => {
//Use States for Modal
const [show, setShow] = useState(true);
const handleClose = () => {
setShow(!show);
};
return ReactDom.createPortal(
<div>
<Modal
show={show}
keyboard={false}
onHide={handleClose}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Update Thesis Details
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form
noValidate
validated={validated}
id="addFormId"
onSubmit={handleUpdateForm}
>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridTitle">
<Form.Label>Title</Form.Label>
<Form.Control
type="text"
onChange={(e) => setTitle(e.target.value)}
placeholder="Enter title"
value={title}
required
/>
<Form.Control.Feedback type="invalid">
Please enter a title.
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="formGridAdviser">
<Form.Label>Adviser</Form.Label>
<Form.Control
type="text"
onChange={(e) => setAdviser(e.target.value)}
placeholder="Name of Adviser"
value={adviser}
required
/>
<Form.Control.Feedback type="invalid">
Please enter an Adviser.
</Form.Control.Feedback>
</Form.Group>
</Row>
<Form.Group className="mb-3" controlId="formGridAbstract">
<Form.Label>Abstract</Form.Label>
<Form.Control
as="textarea"
onChange={(e) => setAbstract(e.target.value)}
rows={3}
placeholder="Enter Abstract Details"
value={abstract}
required
/>
<Form.Control.Feedback type="invalid">
Please enter Abstract Details.
</Form.Control.Feedback>
</Form.Group>
<Button type="Submit">Add Content</Button>
</Form>
</Modal.Body>
</Modal>
</div>,
document.getElementById("modal-root")
);
};
export default Edit_Modal;
As #adhinarayan said you can use the useState of setThesisId to get the specific ID of your document.
Example useState:
const [thesisId, setThesisId] = useState("");
You can use the openUpdateModal function to get the Modal and the thesis ID
const openUpdateModal = (id) => {
setThesisId(id); //useState for ID
setShowModalEdit(true); //useState for Modal
};
Finally, make sure that the Modal Component was placed outside of the map function to avoid looping of modals. You can set the thesisId to customized props of Edit_Modal
...</tbody>
</Table>
{showModalEdit && <Edit_Modal modalToggle={thesisId} />}
</Col>...
It is a login page component in that I want to open forgot password component. Both components are modal. But when I clicked on Forgot password the login page modal is kept open. I just closed the login pop-up, when I click on it, forgot the password component
Below is the login pop-up component
//Initial state for Modal
const [show, setShow] = useState(false);
//Close Modal
const handleClose = () => {
setShow(false)
};
//On this click Modal get visiblr
const handleShow = () => setShow(true);
<>
<p onClick={handleShow}>LOGIN</p>
//Login Modal
<Modal show={show} onHide={handleClose} className="p-5 authpop">
<Modal.Header closeButton onClick={handleClose}>
<Modal.Title>
Log In
</Modal.Title>
</Modal.Header>
//Form submit
<Form className=" p-3" onSubmit={handleSubmit}>
<Form.Group className="mb-3 validateInput">
<Form.Label>Enter email id</Form.Label>
<Form.Control ref={emailRef} className="inputField" id="loginEmail" type="email" placeholder="Your email"
onChange={validateEmail}
/>
<span className="errorMsg" >{emailError}</span>
</Form.Group>
<Form.Group className="mb-3 validateInput">
<Form.Label>Enter Password</Form.Label>
<Form.Control ref={passwRef} className="inputField" id="loginPass" type="password" placeholder="Password"
onChange={(e) => setPassword(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3 d-flex justify-content-center">
<Button className="SelectLogBtns LoginBtns" variant="primary" type="Submit">
Log In
</Button>
</Form.Group>
<div className="errorMsg d-flex mb-3" >{error}</div>
<Form.Group className="mb-3 loginlsRw">
<div className="forgottLink eqSpace justify-content-start">
//ForgottPassword Component link
<ForgottPassw/>
</div>
</Form>
</Modal>
</>
//Here is forgot password component
`const ForgottPassw = () => {
const [Fogshow, setFogShow] = useState(false);
const [showBtn, setShowBtn] = useState(false);
const handleFogClose = () => setFogShow(false);
const handleFogShow = () => setFogShow(true);
const { forgottPass } = useUserAuth();
return (
<> <p onClick={handleFogShow}>Forgott Password</p>
<Modal show={Fogshow} onHide={handleFogClose} className="p-5 authpop">
<Modal.Header closeButton onClick={handleFogClose}>
</Modal.Header>
<Form className="p-3" onSubmit={handleForgott}>
<Form.Group className="mb-3 validateInput">
<Form.Label>Enter email id</Form.Label>
<Form.Control ref={emailRef} className="inputField" id="loginEmail" type="email" placeholder="Your email"
onChange={validateFogEmail}
/>
<span className="errorMsg" >{emailError}</span>
</Form.Group>
//Reset Link
<Form.Group style={{ visibility: showBtn ? 'visible' : 'hidden' }} className="mb-3 d-flex justify-content-center">
Send Reset Link
</Form.Group>
</>
);
}`
Well, the login modal isn't gonna go anywhere unless you make it that way. At the moment the login modal is rendered when the show state is true. Even if you click the forget-password link, it will stay open because you aren't reverting the state to false. Wherever is the logic to make the forget modal visible, include setShow(false) for login modal. Because I can't say what you are doing in your ForgetPassword file and your main component, I can't say much.
I know this is a simple workaround you can do other things to make it work, but simply you can just pass both show and setShow as props to the to the forget-password component like this.
<ForgottPassw show={show} setShow={setShow} />
and then in your functional component, you can take the props and change the handleFogShow function to this
const ForgottPassw = ({show, setShow}) => {
//...
const handleFogShow = () => {
setShow(false);
setFogShow(true);
}
}
let me know if it fix the issue.
Here is my code :
<Modal centered size="lg" show={showAlertModal} onHide={handleCloseAlertModal}>
<Modal.Header>
<Modal.Title>{dpAlert !== null && dpAlert.id !== null ? `Alert #${dpAlert.id} - Editing` : `New Alert`}</Modal.Title>
</Modal.Header>
<Form onSubmit={handleSubmit}>
<Modal.Body>
<Form.Group controlId="language">
<Form.Label>Language</Form.Label>
<Form.Control id='inputL' onChange={(value) => setInputLanguage} type="text" placeholder="Language" required />
<Form.Text className="text-muted">
This is used for internal reference only, not shown to the public
</Form.Text>
</Form.Group>
<hr />
<b>Preview:</b>
{getAlertPreview(dpAlert)}
</Modal.Body>
<Modal.Footer>
<Button type="reset" variant="danger" size="lg" onClick={handleCloseAlertModal}>
Close
</Button>
<Button type="submit" variant="primary" size="lg" onClick={handleSubmit} form="newAlert">
Save
</Button>
</Modal.Footer>
</Form>
</Modal>
I am trying to get the value from
<Form.Control id='inputL' onChange={(value) => setInputLanguage} type="text" placeholder="Language" required />
and I have tried the onChange to set the value in a state but it's not working? Any help is appreciated thank you
You can get with event.target.value
const setInputLanguage = event => {
console.log(event.target.value);
}
<Form.Control id='inputL' onChange={(value) => setInputLanguage} type="text" placeholder="Language" required />
OR
<Form.Control id='inputL' onChange={event => console.log(event.target.value)} type="text" placeholder="Language" required />
I am following https://react.semantic-ui.com/modules/modal to create a Modal form.
I want to close the Modal when click on the Cancel button. I am restricted not to use the shorthand method suggested in the link above. How should I write the handleClose() function in order to close the Modal form?
handleClose = () => {
console.log("close")
}
render(){
return(
<Modal trigger={<Button>Upload</Button>}closeIcon>
<Modal.Content>
<p>Please upload a valid file.</p>
<Form.Input
name="upload"
label=""
type="file"
onChange={e =>
this.setState({file_data : e.target.files[0]})}
>
</Form.Input>
</Modal.Content>
<Modal.Actions>
<Button onClick = {this.handleClose}>Cancel
</Button>
<Button positive onClick = {this.handleUpload}>Upload
</Button>
</Modal.Actions>
</Modal>
);
}
I actually solved it. I initialize a variable in state which model_open : false and then declare two function for it.
handleOpen = () => {
this.setState({ model_open: true })
}
handleClose = () => {
this.setState({ model_open: false })
}
Then I just call these method based on use case.
render(){
return(
<Modal
trigger={<Button onClick={this.handleOpen}>Upload</Button>}
open={this.state.model_open}
onClose={this.handleClose}
closeIcon>
<Modal.Content>
<p>Please upload a valid file.</p>
<Form.Input
name="upload"
label=""
type="file"
onChange={e =>
this.setState({file_data : e.target.files[0]})}
>
</Form.Input>
</Modal.Content>
<Modal.Actions>
<Button onClick = {this.handleClose}>Cancel
</Button>
<Button positive onClick = {this.handleUpload}>Upload
</Button>
</Modal.Actions>
</Modal>
);
}