We Keep Coding

Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Modal)`, but its value is `undefined`

I get a warning after applying code from Material UI Dialog component. App works fine but i want to solve the warning, do you know how can i solve it ?
here is a link to material ui component:
https://mui.com/material-ui/react-dialog/
Note: before adding the dialog component everything worked fine.
Thanks in advance for everyone answering !
import * as React from 'react';
import Avatar from '#mui/material/Avatar';
import Button from '#mui/material/Button';
import CssBaseline from '#mui/material/CssBaseline';
import TextField from '#mui/material/TextField';
import FormControlLabel from '#mui/material/FormControlLabel';
import Checkbox from '#mui/material/Checkbox';
import Link from '#mui/material/Link';
import Grid from '#mui/material/Grid';
import Box from '#mui/material/Box';
import LockOutlinedIcon from '#mui/icons-material/LockOutlined';
import Typography from '#mui/material/Typography';
import Container from '#mui/material/Container';
import { createTheme, ThemeProvider } from '#mui/material/styles';
import axios from "axios";
import Switch from '#mui/material/Switch';
import Dialog from '#mui/material/Dialog';
import DialogActions from '#mui/material/DialogActions';
import DialogContent from '#mui/material/DialogContent';
import DialogContentText from '#mui/material/DialogContentText';
import DialogTitle from '#mui/material/DialogTitle';
import Slide from '#mui/material/Slide';
import {useNavigate} from "react-router-dom";
import {useState} from "react";
function Copyright(props) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const theme = createTheme();
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
export default function SignIn() {
const history = useNavigate();
const [dialogueMessage,setDialogueMessage] = useState('')
const [checked, setChecked] = useState(true);
const handleChange = (event) => {
setChecked(event.target.checked);
};
const [iopen, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
const username = data.get('email').split("#")[0];
if (checked === false ) {
console.log("post")
axios.post(process.env.REACT_APP_LOCAL_HOST + "/users/login", {
email: data.get('email'),
password: data.get('password')
}).then((resp) => {
console.log(resp.data)
history("/users/" + username,{state:{token:resp.data.token,email:data.get('email'),user_id:resp.data.item.id}})
})
}else{
axios.post(process.env.REACT_APP_LOCAL_HOST + "/admin/login", {
email: data.get('email'),
password: data.get('password')
}).then((resp) => {
if(resp.data.success === false){
handleClickOpen()
setDialogueMessage(resp.data.message)
}else {
history("/admin/" + username, {state: {token: resp.data.token, email: data.get('email')}})
}
})
}
};
return (
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="xs">
<Dialog
open={iopen}
TransitionComponent={Transition}
keepMounted
onClose={handleClose}
aria-describedby="alert-dialog-slide-description"
>
<DialogTitle>{"There is a problem with your login !"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-slide-description">
{dialogueMessage}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Disagree</Button>
<Button onClick={handleClose}>Agree</Button>
</DialogActions>
</Dialog>
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Log in
</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Switch
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
Are you an admin ?
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Log In
</Button>
<Grid container>
<Grid item xs>
<div/>
</Grid>
<Grid item>
<Link href="/register" variant="body2">
{"Don't have an account? Register"}
</Link>
</Grid>
</Grid>
</Box>
</Box>
{/*<Copyright sx={{ mt: 8, mb: 4 }} />*/}
</Container>
</ThemeProvider>
);
}

When the page loads, the API call has not yet resolved so you get the warning. Eventually (if you see it), the data will populate after the API call is resolved.

I got the same issue once I forget to initiate my open dialog state which make sense cause living the state without initiating return the value undefined
const [dialog, setDialog] = useState()
Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Dialog)`, but its value is `undefined`.
after initiating my state the issue dispear
const [dialog, setDialog] = useState(false)

Object is Not a Function in firebase PhoneAuthentication

I am building a form where I have to login into the user by their phone number on CLICKING the send code button I got an error TypeError: Object(...) is not a function where it says that window is not a function can anybody solve my problem.
Error Image
Here is some of my code
import * as React from "react";
import { useState } from "react";
import Avatar from "#mui/material/Avatar";
import Button from "#mui/material/Button";
import ButtonGroup from "#mui/material/ButtonGroup";
import CssBaseline from "#mui/material/CssBaseline";
import TextField from "#mui/material/TextField";
import FormControlLabel from "#mui/material/FormControlLabel";
import Checkbox from "#mui/material/Checkbox";
import Link from "#mui/material/Link";
import Paper from "#mui/material/Paper";
import Box from "#mui/material/Box";
import Grid from "#mui/material/Grid";
import LockOutlinedIcon from "#mui/icons-material/LockOutlined";
import Typography from "#mui/material/Typography";
import { createTheme, ThemeProvider } from "#mui/material/styles";
import background from "../staticfiles/signin-background.jpg";
import "react-phone-input-2/lib/style.css";
import { auth, db, captcha } from "../config/Config";
import { RecaptchaVerifier } from "firebase/auth";
import { Link as RouterLink } from "react-router-dom";
import { useHistory } from "react-router-dom";
import socialMediaAuth from "../service/auth";
function Copyright(props) {
return (
<Typography
variant="body2"
color="text.secondary"
align="center"
{...props}
>
{"Copyright © "}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{" "}
{new Date().getFullYear()}
{"."}
</Typography>
);
}
const theme = createTheme();
export default function SignInUserPhone() {
let history = useHistory();
const [PhoneNumber, setPhoenNumber] = useState("");
const [VerificationCode, setVerificationCode] = useState("");
const [error, setError] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
console.log(PhoneNumber);
console.log(error);
};
const handleSubmit2 = (e) => {
e.preventDefault();
console.log(VerificationCode);
};
const handleOnClick = async (provider) => {
const res = await socialMediaAuth(provider);
await db
.collection("SignedUpUsersData")
.doc(res.uid)
.set({
Email: res.email,
Name: res.displayName,
})
.then(() => {
history.push("/");
})
.catch((err) => setError(err.message));
};
const handleUserButton = (event) => {
event.preventDefault();
history.push("/signinuser");
};
const handleSellerButton = (event) => {
event.preventDefault();
history.push("/signinseller");
};
auth.languageCode = "it";
const setUpCaptcha = () => {
window.recaptchaVerifier = auth().RecaptchaVerifier("recaptcha-container", {
size: "invisible",
callback: (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
console.log(response);
console.log("Ok recapthca sloved");
onSignInSubmit();
},
});
};
const onSignInSubmit = (e) => {
e.preventDefault();
setUpCaptcha();
const phoneNumber = PhoneNumber;
const appVerifier = window.recaptchaVerifier;
auth()
.signInWithPhoneNumber(PhoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
console.log(confirmationResult);
// ...
})
.catch((error) => {
// Error; SMS not sent
// ...
console.log(error.message);
//( Or, if you haven't stored the widget ID:
});
};
return (
<ThemeProvider theme={theme}>
<Grid container component="main" sx={{ height: "100vh" }}>
<CssBaseline />
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: `url(${background})`,
backgroundRepeat: "no-repeat",
backgroundColor: (t) =>
t.palette.mode === "light"
? t.palette.grey[50]
: t.palette.grey[900],
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in With Phone Number
</Typography>
<Box
sx={{
my: 4,
mx: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<ButtonGroup size="large" disableElevation variant="contained">
<Button onClick={handleSellerButton}>SELLER</Button>
<Button onClick={handleUserButton}>USER</Button>
</ButtonGroup>
</Box>
<Box
component="form"
noValidate
onSubmit={onSignInSubmit}
sx={{ mt: 1 }}
>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Phone Number"
name="Phone"
autoComplete="phoenumber"
value={PhoneNumber}
onChange={(phone) => setPhoenNumber(phone.target.value)}
/>
<div id="recaptcha-container"></div>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
onSubmit={onSignInSubmit}
id="sign-in-button"
>
Send Code
</Button>
<Grid container>
<Grid item xs></Grid>
<Grid item>
<Link
component={RouterLink}
to="/signup"
href="#"
variant="body2"
>
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</Box>
{error && <div>{error}</div>}
<Box
component="form"
noValidate
onSubmit={handleSubmit2}
sx={{ mt: 1 }}
>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Verification Code"
name="Verification"
autoComplete="Verification"
value={VerificationCode}
onChange={(verification) =>
setVerificationCode(verification.target.value)
}
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Submit
</Button>
<Copyright sx={{ mt: 5 }} />
</Box>
</Box>
</Grid>
</Grid>
</ThemeProvider>
);
}
All the files are correctly exported from config js cause sign in with email and password and sign in with social media are working

React uses a virtual DOM so doesn't have the same access to window as writing a website with pure javascript. So accessing the window object will often cause issues.
This does seem to be a duplicate of this answer though. That might help you fix the bug

Saved data breaks material ui text fields

I'm new to both react and material ui and I'm having an issue where my text fields work fine but if the user has saved data to autofill the field it breaks the styling on it. I have included the code from the component below. I apologize if this is a dumb question but I googled it and didn't find anything helpful.
import React, {useState} from 'react';
import { Grid, Button, TextField, CardContent } from '#mui/material';
import Box from '#mui/material/Box';
import Auth from '../utils/auth';
import { useMutation } from '#apollo/client';
import { LOGIN_USER } from '../utils/mutations';
import FormControl from '#mui/material/FormControl';
const LoginForm = () => {
const [userFormData, setUserFormData] = useState({ email: '', password: '' });
const [validated] = useState(false);
const [showAlert, setShowAlert] = useState(false);
const [login] =useMutation(LOGIN_USER);
const handleInputChange = (event) => {
const { name, value } = event.target;
setUserFormData({ ...userFormData, [name]: value });
};
const handleFormSubmit = async (event) => {
event.preventDefault();
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
try {
const data= await login({
variables: {...userFormData}
});
console.log(data);
Auth.login(data.data.login.token);
} catch (err) {
console.error(err);
setShowAlert(true);
}
setUserFormData({
username: '',
email: '',
password: '',
});
};
return (
<Box style={{ maxWidth: 650, margin: "0 auto", padding: "20px 5px" }}>
<CardContent sx={{fontFamily: "gotham"}}>
<form noValidate validated={validated} onSubmit={handleFormSubmit}>
<Grid container spacing={1}>
<Grid xs={12} item>
<TextField
required
error
id="outlined-error-helper-text"
label="Email Address"
fullWidth
color="error"
focused
style={{marginBottom:"10px"}}
onChange={handleInputChange}
value={userFormData.email}
text="email"
name="email"
/>
</Grid>
<Grid xs={12} item>
<TextField
required
error
type="password"
id="outlined-error-helper-text"
label="Password"
fullWidth
color="error"
focused
style={{marginBottom:"10px"}}
onChange={handleInputChange}
value={userFormData.password}
text="password"
name="password"
/>
</Grid>
<Grid sx={{ mt: 0.25 }} xs={12} item >
<Button type="submit"
color="secondary"
variant="outlined"
fullWidth
style={{ border: '2px solid', marginBottom:"15px", fontSize:"22px"}}
disabled={!(userFormData.email && userFormData.password)}>
Login
</Button>
</Grid>
</Grid>
</form>
</CardContent>
</Box>
)
}
export default LoginForm;
broken text field
working text field

on css file :
// Change the white to any color
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}

React Material TextArea styling is broken

I am following this example for a basic login screen. Very new to React but I found it to be pretty simple so far.
Unfortunately, as you can see in the screenshot below, the TextAreas look really bad! It seems like the inner padding is messed up.
I'm not sure what I'm doing wrong.
The fields should look like this:
Here is the code:
import React from 'react';
import { FunctionComponent, useState } from 'react';
import Paper from '#material-ui/core/Paper';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
import Button from '#material-ui/core/Button';
import Avatar from '#material-ui/core/Avatar';
import Typography from '#material-ui/core/Typography';
import Grid from '#material-ui/core/Grid';
import IconButton from '#material-ui/core/IconButton';
import InputAdornment from '#material-ui/core/InputAdornment';
import Visibility from '#material-ui/icons/Visibility';
import VisibilityOff from '#material-ui/icons/VisibilityOff';
import { makeStyles } from '#material-ui/core/styles';
export interface ComponentProps {
email: string;
password: string;
name: string;
showPassword: boolean;
}
const useStyles = makeStyles((theme) => ({
root: {
height: '100vh',
},
paper: {
margin: theme.spacing(8, 4),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
sideImage: {
backgroundImage: '',
backgroundRepeat: 'no-repeat',
backgroundColor: theme.palette.grey[900],
backgroundSize: 'cover',
backgroundPosition: 'center',
},
form: {
marginTop: theme.spacing(1),
width: '100%',
},
logo: {
margin: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export const ReactLoginComponent: FunctionComponent<ComponentProps> = (props) => {
const classes = useStyles();
const [values, setValues] = useState({
email: '',
password: '',
name: 'Davey Jones', // TODO: un hardcode this!
showPassword: false,
});
const handleChange = (prop) => (event: React.ChangeEvent<HTMLInputElement>) => {
setValues({ ...values, [prop]: event.target.value });
};
const handleClickShowPassword = () => {
setValues({ ...values, showPassword: !values.showPassword });
};
const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
};
const login = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
alert(`Welcome ${values.name}`);
};
return (
<Grid container component="main" className={classes.root}>
<Grid item xs={12} sm={8} md={7} lg={4} component={Paper} elevation={0}>
<div className={classes.paper}>
<Avatar
src="../../../assets/img/logo/logo-half.png"
alt="Branding"
className={classes.logo}
/>
<Typography component="h1" variant="h6">
Welcome Back {values.name}
</Typography>
<form noValidate className={classes.form}>
{/* Email */}
<TextField
required
fullWidth
autoFocus
id="email"
variant="outlined"
label="Email"
margin="normal"
type="text"
value={values.email}
/>
{/* Password */}
<TextField
required
fullWidth
id="password"
variant="outlined"
label="Password"
margin="normal"
type={values.showPassword ? 'text' : 'password'}
value={values.password}
onChange={handleChange('password')}
autoComplete="current-password"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="Toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{values.showPassword ? <Visibility/> : <VisibilityOff/>}
</IconButton>
</InputAdornment>
),
}}
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary"/>}
label="Remember me"
/>
<Button
fullWidth
type="submit"
variant="contained"
size="large"
className={classes.submit}
onClick={login}
>
Sign in
</Button>
</form>
</div>
</Grid>
<Grid item xs={false} sm={4} md={5} lg={8} className={classes.sideImage}>
</Grid>
</Grid>
);
};
Versions:
"react": "^16.12.0"
"#material-ui/core": "^4.10.2"
"#material-ui/icons": "^4.9.1"
"#material-ui/styles": "^4.10.0"
Edit:
I should've mentioned that I'm using React inside an Angular application that is using Angular Material and has global overrides for certain components. This is probably where the issue is coming from. How can I negate those global changes from this React component specifically? Or could I override them in this component?

How to do internal redirecting in reactjs?

I'm kinda new to react and was wondering how to internally redirect your pages in reactjs. I have two pages called register and register2. In register page, I just check if the email exists in the database or not and if it doesn't exist then it redirects to register2 page for creating the full account with username and password. However, in the address bar, it kinda looks ugly to show something like register2. So I was wondering if there is any way through which I can internally redirect without changing the address in the address bar to register2 such that it stays as register throughout the whole account creation process.
I created a codesandbox to show the issue
register.js
import React, { useState } from "react";
import { Formik } from "formik";
import TextField from "#material-ui/core/TextField";
import * as Yup from "yup";
import Avatar from "#material-ui/core/Avatar";
import Button from "#material-ui/core/Button";
import CssBaseline from "#material-ui/core/CssBaseline";
import Link from "#material-ui/core/Link";
import Grid from "#material-ui/core/Grid";
import Box from "#material-ui/core/Box";
import LockOutlinedIcon from "#material-ui/icons/LockOutlined";
import Typography from "#material-ui/core/Typography";
import { makeStyles } from "#material-ui/core/styles";
import Container from "#material-ui/core/Container";
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
<Link color="inherit" href="sad">
New1
</Link>{" "}
{new Date().getFullYear()}
{"."}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main
},
form: {
width: "100%",
marginTop: theme.spacing(1)
},
submit: {
margin: theme.spacing(3, 0, 2)
}
}));
const Reg = props => {
const classes = useStyles();
const [loginError, setLoginError] = useState("");
const [changed, setChanged] = useState(false);
const [newpage, setNew] = useState(false);
const handleSubmit = async (values, { setSubmitting }) => {
const { email } = values;
var body = {
email: email
};
console.log(body);
const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: JSON.stringify(body)
};
const url = "/api/emailcheck";
try {
const response = await fetch(url, options);
const text = await response.text();
setSubmitting(false);
setChanged(false);
setNew(true);
console.log(text);
if (newpage) {
props.history.push({
pathname: "/register2",
state: { email }
});
// props.history.push(`/register2/${email}`);
} else if (text === "exists") {
props.history.push(`/`);
} else {
setLoginError("Email is invalid");
}
} catch (error) {
console.error(error);
}
};
return (
<Formik
initialValues={{ email: "" }}
onSubmit={handleSubmit}
//********Using Yup for validation********/
validationSchema={Yup.object().shape({
email: Yup.string()
.email()
.required("Required")
})}
>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
handleSubmit
} = props;
return (
<>
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form
className={classes.form}
onSubmit={handleSubmit}
noValidate
>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
value={values.email}
label="Email Address"
name="email"
autoComplete="email"
onChange={e => {
setChanged(true);
handleChange(e);
}}
onBlur={handleBlur}
className={errors.email && touched.email && "error"}
/>
{errors.email && touched.email && (
<div className="input-feedback" style={{ color: "red" }}>
{errors.email}
</div>
)}
{!changed && loginError && (
<div style={{ color: "red" }}>
<span>{loginError}</span>
</div>
)}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
disabled={isSubmitting}
>
Next
</Button>
<Grid container justify="flex-end">
<Grid item>
<Link href="/" variant="body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={5}>
<Copyright />
</Box>
</Container>
</>
);
}}
</Formik>
);
};
export default Reg;
register2.js
import React, { useState } from "react";
import { Formik } from "formik";
import TextField from "#material-ui/core/TextField";
import { withRouter, useHistory } from "react-router-dom";
import * as Yup from "yup";
import Avatar from "#material-ui/core/Avatar";
import Button from "#material-ui/core/Button";
import CssBaseline from "#material-ui/core/CssBaseline";
import Link from "#material-ui/core/Link";
import Box from "#material-ui/core/Box";
import LockOutlinedIcon from "#material-ui/icons/LockOutlined";
import Typography from "#material-ui/core/Typography";
import { makeStyles } from "#material-ui/core/styles";
import Container from "#material-ui/core/Container";
function Copyright() {
return (
<Typography va riant="body2" color="textSecondary" align="center">
<Link color="inherit" href="sad">
New
</Link>{" "}
{new Date().getFullYear()}
{"."}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main
},
form: {
width: "100%",
marginTop: theme.spacing(1)
},
submit: {
margin: theme.spacing(3, 0, 2)
}
}));
const Reg2 = props => {
const classes = useStyles();
const [loginError, setLoginError] = useState("");
const history = useHistory();
const [changed, setChanged] = useState(false);
const handleSubmit = async (values, { setSubmitting }) => {
const { username, password } = values;
var body = {
username: username,
password: password,
email: history.location.state.email
};
console.log(body);
const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: JSON.stringify(body)
};
const url = "/api/register";
try {
const response = await fetch(url, options);
const text = await response.text();
setSubmitting(false);
setChanged(false);
console.log(text);
if (text === "verifyemail") {
props.history.push({
pathname: "/verifyOtp",
state: { email: body.email }
});
// props.history.push(`/verifyOtp/${username}`);
} else {
setLoginError("Username or Password is incorrect");
}
} catch (error) {
console.error(error);
}
};
return (
<Formik
initialValues={{ username: "", password: "", confirmPassword: "" }}
onSubmit={handleSubmit}
//********Using Yup for validation********/
validationSchema={Yup.object().shape({
username: Yup.string().required("Required"),
password: Yup.string()
.required("No password provided.")
.min(8, "Password is too short - should be 8 chars minimum.")
.matches(/(?=.*[0-9])/, "Password must contain a number.")
.matches(
/(?=.*[●!"#$%&'()*+,\-./:;<=>?#[\\\]^_`{|}~])/,
"Password must contain a symbol."
),
confirmPassword: Yup.string()
.required("Enter to confirm password")
.oneOf([Yup.ref("password"), null], "Password do not match")
})}
>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
handleSubmit
} = props;
return (
<>
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Enter Info
</Typography>
<form
className={classes.form}
onSubmit={handleSubmit}
noValidate
>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="username"
value={values.username}
label="username"
name="username"
autoComplete="username"
onChange={e => {
setChanged(true);
handleChange(e);
}}
onBlur={handleBlur}
className={errors.username && touched.username && "error"}
/>
{errors.username && touched.username && (
<div className="input-feedback" style={{ color: "red" }}>
{errors.username}
</div>
)}
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
value={values.password}
label="Password"
type="password"
id="password"
onBlur={handleBlur}
autoComplete="current-password"
className={errors.password && touched.password && "error"}
onChange={e => {
setChanged(true);
handleChange(e);
}}
/>
{errors.password && touched.password && (
<div className="input-feedback" style={{ color: "red" }}>
{errors.password}
</div>
)}
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="confirmPassword"
value={values.confirmPassword}
type="password"
label="Confirm Password"
id="confirmPassword"
onBlur={handleBlur}
autoComplete="confirmPassword"
className={
errors.confirmPassword &&
touched.confirmPassword &&
"error"
}
onChange={e => {
setChanged(true);
handleChange(e);
}}
/>
{errors.confirmPassword && touched.confirmPassword && (
<div className="input-feedback" style={{ color: "red" }}>
{errors.confirmPassword}
</div>
)}
{!changed && loginError && (
<div style={{ color: "red" }}>
<span>{loginError}</span>
</div>
)}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
disabled={isSubmitting}
>
Next
</Button>
</form>
</div>
<Box mt={8}>
<Copyright />
</Box>
</Container>
</>
);
}}
</Formik>
);
};
export default withRouter(Reg2);

you could make a parent component for register and register2 and store your logic there in which component to display
function MyComponent() {
const [email, setEmail] = useState(null)
useEffect(() => {
(async () => {
const response = await yourApiCall()
setEmail(response)
})()
}, [])
return email ? <Register /> : <Register2 />
}

Initially show the register component or code of that sort.
Call an api, if the email exists, store flag value in that and do conditional rendering for another component or code of register2.
Initially, this.state.isEmailExist : false,
After api call change flag value accordingly. If true then render Register2.
const contents = if (!this.state.isEmailExist) {
return (
<Register />
);
} else {
return (
<Register2 />
)
}
return(
<div>{contents}</div>
)

Maybe you are looking for this
window.open("https://www.youraddress.com","_self");
Make sure to setup the validation.