I am working with simple form validation in react. The problem here is error message is not displaying in while it is showing in console.log! I am quite new to react and stucked here for quite some time. How can I solve this?
I've seen many youtube videos but nothing is working properly.
const [logindata, setLogindata] = useState({
customeremail: '',
customerpass: ''
})
const [err, seterr] = useState({
Email: '',
Passwordnew: ''
});
const handlechange = event => {
const val = event.target.value
const name = event.target.name
setLogindata({ ...logindata, [name]: val })
console.log(val)
}
function login() {
const NewErr = {...err};
if (logindata.customeremail == "") {
NewErr.Email = "Email should not be empty";
alert(NewErr.Email)
console.log(NewErr)
}
}
return (
<>
<div className="container">
<div className="row">
<div className="col-12 col-sm-12 col-md-6 col-lg-6 main-col offset-md-3">
<div className="mb-4">
<form method="post" action="home" id="CustomerLoginForm" acceptCharset="UTF-8" className="contact-form">
<div className="row">
<div className="col-12 col-sm-12 col-md-12 col-lg-12">
<div className="form-group">
<label htmlFor="CustomerEmail">Email</label>
<input type="email" name="customeremail" placeholder="" id="CustomerEmail" className="" autoCorrect="off" autoCapitalize="off" autoFocus="" onChange={handlechange} value={logindata.customeremail} required = {true} />
</div>
<div className="alert alert-danger" role="alert">
{seterr.Email}
</div>
</div>
<div className="col-12 col-sm-12 col-md-12 col-lg-12">
<div className="form-group">
<label htmlFor="CustomerPassword">Password</label>
<input type="password" name="customerpass" placeholder="" id="CustomerPassword" className="" onChange={handlechange} value={logindata.customerpass} />
</div>
</div>
</div>
<div className="row">
<div className="text-center col-12 col-sm-12 col-md-12 col-lg-12">
<input type="button" style={{ backgroundColor: '#000', color: '#fff' }} className="btn mb-3" value="Sign In" onClick={login} />
<p className="mb-4">
Forgot your password? |
Create account
</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</>
There are 2 problem in your code
1. Not setting state
You are not setting state for err using seterr as:
if (logindata.customeremail == '') {
NewErr.Email = 'Email should not be empty';
alert(NewErr.Email);
console.log(NewErr);
seterr(NewErr); // MISSING
}
CODESANDBOX LINK
2. Showing error message with wrong way
When you use useState then it will give you an array of value and function through which you can update the value and on change of the value it will re-render it. You have to use err obj not the function seterr.
You should use {err.Email}} instead of {seterr.Email}}
<div className='alert alert-danger' role='alert'>
{/* {seterr.Email} */}
{err.Email}
</div>;
I'm working on dynamic react form. I want to update dynamic form data. I have populate and get the data from backend successfully but when I enter in input field for change some data then I'm not able to change it. I am adding here my form image. Please check and tell me how can I can fix it.
import React from "react"
const VarientDetailEdit = (props) => {
return (
props.varientDetails.map((val, idx) => {
let sort=`sort-${idx}`, sku=`sku-${idx}`, waightunitno=`waightunitno-${idx}`, unit=`unit-${idx}`, mrp=`mrp-${idx}`, discount=`discount-${idx}`, price=`price-${idx}`, stock=`stock-${idx}`, minstock=`minstock-${idx}`, outofstock=`outofstock-${idx}`
return (
<div>
<div style={{float:"right"}}>
{
idx ?
<button style={{paddingLeft:"10px"}} className="btn btn-danger" onClick={(() => props.delete(val))} ><i className="fa fa-minus" aria-hidden="true"></i></button> : null
}
</div>
<div><br></br><br></br>
<div key={val.index} className='row'>
<div class="form-group col-sm-4">
<label>Sort:</label>
<input type="text" value={val.sort} name="sort" data-id={idx} id={sort} className="form-control " />
</div>
<div class="form-group col-sm-4">
<label>SKU</label>
<input type="text" value={val.sku} name="sku" data-id={idx} id={sku} className="form-control " />
</div>
<div class="form-group col-sm-4">
<label>Weight/Quantity</label>
<input type="text" value={val.waightunitno} name="waightunitno" id={waightunitno} data-id={idx} className="form-control " />
</div>
</div>
<div className='row'>
<div class="form-group col-sm-4">
<label>Unit</label>
<input type="text" value={val.unit} name="unit" id={unit} data-id={idx} className="form-control " />
</div>
<div class="form-group col-sm-4">
<label>MRP <em style={{color:"tomato"}}>*</em></label>
<input type="text" value={val.mrp} name="mrp" id={mrp} data-id={idx} className="form-control " />
</div>
<div class="form-group col-sm-4">
<label>Discount(%) <em style={{color:"tomato"}}>*</em></label>
<input type="text" value={val.discount} name="discount" id={discount} data-id={idx} className="form-control " />
</div>
</div>
<div className='row'>
<div class="form-group col-sm-4">
<label>Price <em style={{color:"tomato"}}>*</em></label>
<input type="text" value={val.price} name="price" id={price} data-id={idx} className="form-control " />
</div>
<div class="form-group col-sm-4">
<label>Stock <em style={{color:"tomato"}}>*</em></label>
<input type="text" value={val.stock} name="stock" id={stock} data-id={idx} className="form-control " />
</div>
<div class="form-group col-sm-4">
<label>Min Stock Alert <em style={{color:"tomato"}}>*</em></label>
<input type="text" value={val.minstock} name="minstock" id={minstock} data-id={idx} className="form-control " />
</div>
<div className='col-sm-4'>
<div className="form-group">
<label className="form-label">Variant Out of Stock Status <em style={{color:"tomato"}}>*</em></label>
<select name="outofstock" value={val.outofstock} id={outofstock} data-id={idx} className="form-control" >
<option value="pending">Pending</option>
<option value="In Progress">In progress</option>
<option value="Completed">Completed</option>
<option value="Hold">Hold</option>
</select>
</div>
</div>
<hr className="my-4"></hr>
</div>
</div>
</div>
)
})
)
}
export default VarientDetailEdit
Parent component
handleChange = (e) => {
if (["sort", "sku", "waightunitno", "unit", "mrp", "discount", "price", "stock", "minstock", "outofstock"].includes(e.target.name)) {
let varientDetails = [...this.state.varientDetails]
varientDetails[e.target.dataset.id][e.target.name] = e.target.value;
} else if (["isTex"].includes(e.target.name)) {
this.setState({ [e.target.name]: e.target.value })
console.log(e)
// }else if (["files[]"].includes(e.target.name)) {
// this.setState({ files:e.target.files });
}
else {
this.setState({ [e.target.name]: e.target.value })
}
}
addNewRow = () => {
this.setState((prevState) => ({
varientDetails: [...prevState.varientDetails, { index: Math.random(), sort:5,
sku: "",
waightunitno: "",
unit:"",
mrp:0,
discount:0,
price:0,
stock:0,
minstock:0,
outofstock:""}],
}));
}
deteteRow = (index) => {
this.setState({
varientDetails: this.state.varientDetails.filter((s, sindex) => index !== sindex),
});
}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state)
if(this.state.date==='' || this.state.description==='')
{
NotificationManager.error(" Error -Please Fill up all Required Field!!!");
return false;
}
for(var i=0;i<this.state.varientDetails.length;i++)
{
if(this.state.varientDetails[i].sort==='' || this.state.varientDetails[i].varient==='')
{
NotificationManager.error("Error- Product Varient Fields are required!!!");
return false;
}
}
const formData = new FormData();
for (const file of this.state.files) {
formData.append('file', file)
}
const config = {
Headers: {
'content-type': 'multipart/form-data',
"Content-Type": "multipart/form-data; boundary=AaB03x" +
"--AaB03x" +
"Content-Disposition: file" +
"Content-Type: png" +
"Content-Transfer-Encoding: binary" +
"...data... " +
"--AaB03x--",
"Accept": "application/json",
"type": "formData"
},
productId:this.state.id,
name:this.state.name,
description:this.state.description,
lableType:this.state.lableType,
photo:this.state.thumbNailphoto,
isTex:this.state.isTex,
GSTrate:this.state.GSTrate,
GSTtyp:this.state.GSTtyp,
HSNcode:this.state.HSNcode,
videoUpload:this.state.videoUpload,
// categoryId:this.state.categoryId,
// subCategoryId:this.state.subCategoryId,
tags:this.state.tags,
file:formData,
reccomendedProduct:this.state.reccomendedProduct,
varientDetails:this.state.varientDetails
};
console.log(this.state)
swal({
title: "Are you sure?",
text: "You want to Add New Product",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then(async (success) => {
if (success) {
let list = await GetProductDetails.getUpdateProduct(config);
if (list) {
this.setState({ isLoaded: false })
this.props.history.push("/admin/mainproduct/list")
} else {
NotificationManager.error("Please! Check input field", "Input Field");
}
}
});
}
clickOnDelete(record) {
this.setState({
varientDetails: this.state.varientDetails.filter(r => r !== record)
});
}
render() {
let { varientDetails,subCategoryId,files,updateFile,loading,productphotos,categoryId,reccomendedProduct } = this.state//let { notes, date, description, varientDetails } = this.state
console.log(updateFile)
return (
<div className="container-fluid">
<div className="row">
<div className="col-lg-5 col-md-9 col-lg-6">
<h2 className="mt-30 page-title">Products</h2>
</div>
<div className="col-lg-5 col-md-3 col-lg-6 back-btn">
<button className='btntop btn text-light' onClick={(e) => this.handleBack()}><i className="fas fa-arrow-left" />cancle</button>
<button type="submit" onClick={this.handleSubmit} className='btntop btn text-light mx-2'>Add</button>
</div>
</div>
<ol className="breadcrumb mb-30">
<li className="breadcrumb-item">Dashboard</li>
<li className="breadcrumb-item">Products</li>
<li className="breadcrumb-item active">Edit Product</li>
</ol>
<hr></hr>
<div className='container'>
<form onChange={this.handleChange} >
<div className='row'>
<div className='col-sm-8'>
<div className='row'>
<div className='col-sm-8'>
<div className="form-group">
<label htmlFor="name" class="form-label">Title <em style={{ color: "tomato" }}>*</em></label>
<input type="text" id="name" value={this.state.name} name="name" class=" w3-input w3-border form-control" aria-describedby="passwordHelpBlock" />
</div>
</div>
<div className="col-lg-12 col-md-12">
<div className="form-group">
<label className="form-label">Description*</label>
<RichTextEditor
style={{ height: " 275.438px" }}
className="w3-input w3-border"
content={this.state.description}
handleContentChange={this.handleContentChange}
placeholder="insert text here..." />
</div>
</div>
<div className='col-sm-8 py-4'>
<div className="form-group row">
<label className="my-2">Lables</label>
<label className="btn opt mx-2 col-2 active"style={{backgroundColor: "blue",borderColor: "#449D44"}}>
<input type="radio" id="lableType" hidden name="lableType" autocomplete="off" checked="checked"/> None
</label>
<label className="btn opt col-2 mx-2"style={{backgroundColor: "#449D44",borderColor: "#449D44"}}>
<input type="radio" hidden id="lableType" name="lableType" value="veg" autocomplete="off" checked="checked"/> veg
</label>
<label className="btn opt mx-2 col-3" style={{backgroundColor: "#C9302C",borderColor: "#C9302C"}}>
<input type="radio" hidden id="lableType" name="lableType" value="None Veg" autocomplete="off" checked="checked"/> None Veg
</label>
</div>
</div>
<div className='col-sm-12'>
<div className="form-group">
<label htmlFor="inputPassword5" class="form-label">Tags</label>
{/* <input type="text" id="inputPassword5" class="w3-input w3-border form-control" aria-describedby="passwordHelpBlock"/> */}
<TagsEditor setStateOfTags={this.setStateOfTags} />
</div>
</div><br></br>
<div className='col py-4'>
<div className="form-group">
<input type="checkbox" name="isTex"value={this.state.isTex} id="isTex" data-toggle="switchbutton" checked data-onlabel="true" data-offlabel="false" data-onstyle="success" data-offstyle="danger" />
</div>
<label htmlFor="isTex" class="form-label">is Taxt Enable</label>
</div>
<div className='row'>
<div className='col-sm-4'>
<div className="form-group">
<label className="form-label">GST Rate<em style={{ color: "tomato" }}>*</em></label>
<input type="number" value={this.state.GSTrate} className=" w3-input w3-border form-control" name="GSTrate" id="GSTrate" />
</div>
</div>
<div className='col-sm-4'>
<div className="form-group">
<label className="form-label">GST Rate Type <em style={{ color: "tomato" }}>*</em></label>
<select id="GSTtyp" value={this.state.GSTtyp} name="GSTtyp" className=" w3-input w3-border form-control">
<option value={1}>Inclusive</option>
<option value={0}>Exclusive</option>
</select>
</div>
</div>
</div>
<div className='col-sm-4 py-2'>
<div className="form-group">
<label htmlFor="HSNcode" class="form-label">HSN Code</label>
<input type="text" value={this.state.HSNcode} name="HSNcode" className='w3-input w3-border form-control' id="HSNcode" aria-describedby="passwordHelpBlock" />
</div>
</div><br></br>
</div>
{/* now we are using varient dynamic form */}
<div className='varientheader py-4' style={{ paddingBottom: "15px" }}>
<a onClick={this.addNewRow} className="btn" style={{ float: 'right', color: "Tomato" }}><i class="fas fa-plus"></i>Add More</a>
<h3 style={{ float: 'left', }}>Varients</h3>
</div>
<hr style={{ padding: "2px", border: "2 px solid black" }}></hr>
<div className="container py-4" style={{ border: "lightgray" }}>
<VarientDetailEdit add={this.addNewRow} delete={this.clickOnDelete.bind(this)} varientDetails={varientDetails} />
</div>
<div className='recomended product'>
<hr></hr>
<h3>Recommended Products</h3>
<hr></hr>
<div className='ex1'>
<ReccomendedFormList rowRcData={reccomendedProduct} setStaterecomended={this.setStaterecomended} />
</div>
</div>
</div>
{/* right section cotegory */}
<div className='col-sm-4'>
<div>
<h3>Category <em style={{ color: "tomato" }}>*</em></h3>
<div className='mx-4 my-2'>
<div className='categorycontainer'>
<CategoryListEdit data={categoryId} sdata={subCategoryId} setStateOfCategory={this.setStateOfCategory} />
<hr></hr>
</div>
{/* file upload */}
<div className='imagecontainer'>
<h3>Upload Images</h3>
<hr />
<div className="wrapper">
<div className="drop">
<div className="cont">
<i className="fas fa-cloud-upload-alt"></i>
<div className="tit">
Drag & Drop
</div>
<div className="desc">
your files to Assets, or
</div>
<div className="browse">
click here to browse
</div>
</div>
<input id="files" multiple name="files[]" onChange={this.fileSelectedHandler} type="file" />
</div>
<ToastContainer autoClose={1500} />
</div>
{this.state.filselected ? <div><i>{this.state.filselected}</i>
{/* <div className="form-group">
<button className="save-btn hover-btn" type="submit" onClick={this.handleSubmitPhoto} disabled={loading}>
{loading && <i className="fa fa-refresh fa-spin" />}
{loading && <span>Upload</span>}
{!loading && <span>Upload</span>}
</button>
<ToastContainer autoClose={1500} />
</div> */}
</div>:
<p>Drag & Drop files here or click to browse.
Note: Max 4 images are allowed.</p>
}
<div style={{display:"flex",margin:"10px"}} >
{ productphotos.map((item,i)=>(
<div className="img_wrp mx-2">
<img width="60px" height="55px" value ={item.imgUrl} src={item.imgUrl} alt="video not found "/><i onClick={(e) =>this.handlawsDeleteById(item.id,item.imgUrl)} className="fa fa-close close"></i>
</div>
))}
</div>
<hr></hr>
</div>
<div className='uploadfile'>
<h3>Upload Video </h3>
<input type="file" className="form-control" onChange={this.VideoUploadFile} />
<p style={{ color: "blue",fontStyle:"italic",fontWeight:"bold" }}>{this.state.msgvideoUpload}</p>
<div className="img_wrp">
<img width="200px" height="150px" src={this.state.videoUpload} alt="video not found "/><i onClick={this.deletePhotoStaticVideo} className="fa fa-close close"></i>
</div>
{/* { this.state.uploadPercentage > 0 && <ProgressBar variant="danger" now={this.state.uploadPercentage} active label={`${this.state.uploadPercentage}%`} /> }<br></br> */}
<div className='upload thambnail my-4'>
<h3>Video Thumbnail Image</h3>
<div className="file-area">
<div className="form-group">
<input type="file" className="form-control" onChange={this.ThumbnainVideoUpload} />
<div className="file-dummy">
<i className="fas fa-plus mx-4 my-4"></i><br></br>
<span className="default">Click to select a file, or drag it here</span>
<span className="success">Great, your file is selected</span>
</div>
<p style={{ color: "blue",fontStyle:"italic",fontWeight:"bold" }}>{this.state.msgThumb}</p>
<div className="img_wrp">
<img width="200px" height="150px" src={this.state.thumbNailphoto} alt="thumbnail not found"/><i className="fa fa-close close" onClick={this.deletePhotoStaticThumb} ></i>
</div>
{/* {(() => {
if (!this.state.photo)
return <button onClick={this.handleCanclePhoto}>delete</button>
}
)} */}
{/* { this.state.uploadPercentage > 0 && <ProgressBar variant="danger" now={this.state.uploadPercentage} active label={`${this.state.uploadPercentage}%`} /> }<br></br> */}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
)
}
i have solve my problem.we have to use defaultValue for solve his problem
<input type="text" defaultValue={this.props.value || ''} />
How do I add the verification of my fields!
I'm trying to send emails like this [emailjs][1], but I realise that I can also submit my empty form! So I'm wondering how to adjust my code so that it takes into account the verification of fields!
I have followed the documentation on emailjs about submitting a form with a name, email, subject, and message but there is one last problem! I've been following the documentation on emailjs regarding the submission of a form with a name, email, subject, and message, but there is still a problem: I am able to send my message successfully and I receive the data on emailjs and in my gmail mailbox, but I can also submit the empty form! How can I fix this? thank you
import React, { Fragment, useRef } from 'react';
import emailjs from 'emailjs-com';
import { Link } from 'react-router-dom';
import { NotificationContainer, NotificationManager } from 'react-notifications';
function Contact() {
const form = useRef();
const sendEmail = (e) => {
e.preventDefault()
emailjs
.sendForm(
'service_yyyyy',
'template_zzzz',
form.current,
'user_ttttt'
)
.then(
(result) => {
NotificationManager.success('Thank you for trusting us, we come back to you sooner.', 'Successful!', 2000);
}, (error) => {
NotificationManager.error('erreur dans le formulaire!', 'erreurs');
});
e.target.reset()
}
return (
<Fragment>
<div className="regular-page-area section-padding-100">
<div className="container">
<div className="row">
<div className="col-12">
<div className="page-content" style= {{backgroundColor:'white'}}>
<h4>text</h4>
<p>text</p>
</div>
</div>
</div>
</div>
</div>
<section className="medium-padding120 bg-body contact-form-animation scrollme">
<div className="container">
<div className="row">
<div className="col col-xl-10 col-lg-10 col-md-12 col-sm-12 m-auto">
<div className="contact-form-wrap">
<div className="contact-form-thumb">
<div className="col-12">
<div className="section-heading">
<h3 style= {{color:'white'}}>Contact form</h3>
</div>
</div>
<h2 className="title"><span>SEND</span> <span>US YOUR</span><span>MESSAGE</span></h2>
<p>text</p>
<img src={require('../../images/crew.png')} alt="crew" className="crew" />
</div>
<form ref={form} onSubmit={sendEmail} className="contact-form">
<div className="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div className="form-group label-floating">
<label className="control-label"> Name</label>
<input
type="text"
className='form-control'
placeholder='Name'
name='name'
/>
</div>
</div>
<div className="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div className="form-group label-floating">
<label className="control-label"> Email</label>
<input
type="email"
className="form-control"
placeholder="youremail#gmail.com"
name='email'
/>
</div>
<div className="form-group label-floating">
<label className="control-label"> Subject</label>
<input
type='text'
className="form-control"
placeholder="Subject"
name='subject'
/>
</div>
<div className="form-group">
<textarea
name="message"
className="form-control"
placeholder="Your Message"
></textarea>
</div>
<button type="submit" className="btn btn-purple btn-lg full-width">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div className="half-height-bg bg-white"></div>
</section>
<NotificationContainer/>
<Footer />
</Fragment>
)
}
export default Contact;
I get the following error when rendering a SweetAlert.. not sure how to solve?
index.js:1451 Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
in n (at LoginOverlay/index.js:248)
in div (at LoginOverlay/index.js:82)
in Formik (at LoginOverlay/index.js:66)
in LoginOverlay (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (at Routes.js:270)
in div (created by ForwardRef(MotionComponent))
in ForwardRef(MotionComponent) (at Routes.js:263)
in Switch (at Routes.js:262)
in PresentationLayout (at Routes.js:261)
in Route (at Routes.js:260)
in Switch (at Routes.js:258)
in Suspense (at Routes.js:257)
in PresenceChild (created by AnimatePresence)
Code:
const LoginOverlay = (props) => {
const history = useHistory();
const { magic, login, clearError } = props;
// useEffect(() => {
// if (magic.entity?.loggedIn && localStorage.getItem('did_token')) {
// //history.push('/business/home');
// }
// }, [magic.loading, magic.showInfoDialog]);
return (
<Formik
initialValues={{
email: ''
}}
validationSchema={yup.object().shape({
email: yup
.string()
.email('Must be valid email address')
.min(3)
.required('Email is required')
})}
onSubmit={async (values, actions) => {
console.log(values, props);
props.login(values.email);
}}>
{(props) => (
<div className="app-wrapper min-vh-100 bg-white">
<div className="hero-wrapper w-100 bg-composed-wrapper bg-midnight-bloom min-vh-100">
<div className="flex-grow-1 w-100 d-flex align-items-center">
<div
className="bg-composed-wrapper--image opacity-2"
style={{ backgroundImage: 'url(' + hero6 + ')' }}
/>
<div className="bg-composed-wrapper--bg bg-second opacity-7" />
<div className="bg-composed-wrapper--content p-3 p-md-5">
<Container>
<Card className="rounded-sm modal-content p-3 bg-white-10">
<Card className="rounded-sm overflow-hidden shadow-xxl font-size-sm p-3 p-sm-0">
<Row className="no-gutters">
<Col
lg="6"
className="d-flex align-items-center justify-content-center flex-column">
<Form onSubmit={props.handleSubmit}>
<div className="divider-v divider-v-lg d-none d-lg-block" />
<div className="text-center mt-4">
<h1 className="font-size-xxl mb-1 font-weight-bold">
Login
</h1>
<br />
<p className="mb-0 text-black-50">
Enter you email below to sign up or sign in to
your account
</p>
<br />
<div className="mb-0 text-black-50">
<div className="form-group mb-6">
<Input
type="text"
{...props.getFieldProps('email')}
placeholder="Email"
invalid={
props.errors.email && props.touched.email
}
valid={
!props.errors.email && props.touched.email
}
/>
<FormFeedback>
{props.errors.email}
</FormFeedback>
</div>
<div className="text-center py-4">
<Button
type="submit"
disabled={
magic.loading || props.isSubmitting
}
className="font-weight-bold w-50 my-2"
color="second">
Submit
</Button>
{/* <LaddaButton
type="submit"
className="m-2 btn btn-second"
loading={(magic.loading || props.isSubmitting)}
onClick={(e) => {
e.preventDefault();
props.submitForm();
}}
data-style={EXPAND_LEFT}>
Submit
</LaddaButton> */}
</div>
</div>
</div>
</Form>
</Col>
<Col
lg="6"
className="d-flex align-items-center justify-content-center flex-column bg-secondary">
<div className="p-3">
<div className="p-4">
<div className="d-block d-xl-flex">
<div className="mt-0 mt-xl-1 mb-md-2 mb-lg-0">
<FontAwesomeIcon
icon={['far', 'heart']}
className="font-size-xl text-first"
/>
</div>
<div className="pl-0 pl-xl-3">
<div className="text-black font-weight-bold font-size-lg mb-1">
Have we anything for here?
</div>
<p className="mb-0 text-black-50">
Have we anything for here?
</p>
</div>
</div>
</div>
<div className="p-4">
<div className="d-block d-xl-flex">
<div className="mt-0 mt-xl-1 mb-md-2 mb-lg-0">
<FontAwesomeIcon
icon={['far', 'lightbulb']}
className="font-size-xl text-first"
/>
</div>
<div className="pl-0 pl-xl-3">
<div className="text-black font-weight-bold font-size-lg mb-1">
Have we anything for here?
</div>
<p className="mb-0 text-black-50">
Have we anything for here?
</p>
</div>
</div>
</div>
<div className="p-4">
<div className="d-block d-xl-flex">
<div className="mt-0 mt-xl-1 mb-md-2 mb-lg-0">
<FontAwesomeIcon
icon={['far', 'user']}
className="font-size-xl text-first"
/>
</div>
<div className="pl-0 pl-xl-3">
<div className="text-black font-weight-bold font-size-lg mb-1">
Have we anything for here?
</div>
<p className="mb-0 text-black-50">
Have we anything for here?
</p>
</div>
</div>
</div>
</div>
</Col>
</Row>
</Card>
</Card>
</Container>
</div>
</div>
<div className="hero-footer w-100 pb-4">
<Container>
<div className="py-3 d-block d-lg-flex font-size-xs justify-content-between">
<div className="text-center d-block mb-3 mb-md-0 text-white">
XXXXX 2021
</div>
<Nav className="nav-transparent justify-content-center">
<NavItem>
<NavLinkStrap
className="text-white-50"
href="#/"
onClick={(e) => e.preventDefault()}>
Privacy Policy
</NavLinkStrap>
</NavItem>
<NavItem>
<NavLinkStrap
className="text-white-50"
href="#/"
onClick={(e) => e.preventDefault()}>
Terms of Service
</NavLinkStrap>
</NavItem>
</Nav>
</div>
</Container>
</div>
</div>
<SweetAlert
title="Check your email"
show={!magic.entity?.loggedIn && magic.showInfoDialog}
html={`We emailed a magic link to ${props.values.email}</br>Click the link in your email and then return to this tab to log in or sign up.</br>`}
type="info"
showCancelButton={false}
showConfirmButton={false}
/>
<SweetAlert
title="Error"
show={!magic.entity?.loggedIn && magic.errorMessage}
html={magic.errorMessage}
type="error"
showCancelButton={false}
showConfirmButton={true}
onConfirm={() => clearError()}
/>
{
(localStorage.getItem("did_token") || magic.entity?.loggedIn ) && <Redirect to="/business/home" />
}
</div>
)}
</Formik>
Please check for any other alerts that is dependent. It happens when you are trying to access multiple alerts
import React, { Component } from 'react';
class BigText extends Component {
render() {
return (
<div>
<div>
<h1 className="row px-2">Big Text Notification</h1>
<hr />
<div className="row px-1 py-2 animated fadeIn">
<div className="px-1" style={{ width:50 + '%' }}><br />
<div className="mb-1">
<input type="text"
className="form-control"
placeholder="Title"
name="title"
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Text"
name="text"
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Summary"
name="summary"
/>
</div>
<br />
<div className="row px-2" >
<div>
<button className="nav-link btn btn-block btn-info" onClick={this.handleClick} >Save</button>
</div>
<div className="px-1">
<button className="nav-link btn btn-block btn-danger"> Cancel</button>
</div>
</div><br />
</div>
</div>
</div>
</div>
)
}
}
export default BigText;
i had added the code snippet
What I'm doing is I'm trying to add a Mobile frame as component on side of the fields so that whatever i write in the fields will be shown in that mobile being shown as the component on the screen
so i wanted to know how to add that mobile and how to show text in it as well