I have a react app where I am using MUI. Its having two pages lets say Login & Signup. And both these pages were wrapped by a toplevel code:
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanelswitch"
hidden={value !== index}
id={`tabpanel-${index}`}
aria-labelledby={`tab-${index}`}
{...other}
>
{value === index && (
<Box>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
return (
<Grid
container
component="div"
marginTop="10px"
direction="row"
alignItems="center"
>
<Paper style={paperStyle} elevation={10}>
<Tabs
value={value}
onChange={handleChange}
aria-label="disabled tabs example"
TabIndicatorProps={{
style: {
backgroundColor: "#xxxxxxxx",
},
}}
centered
>
<Tab label="Sign In" />
<Tab label="Sign Up" />
</Tabs>
<TabPanel value={value} index={0}>
<Login handleChange={handleChange} />
</TabPanel>
<TabPanel value={value} index={1}>
<Signup />
</TabPanel>
</Paper>
</Grid>
);
};
SignIn | SignUp
After clicking the Login button, I am getting the above two pages for login/signup. But When clicking the login button, I am getting the following warning in the browser's console though no impact on the functionality:
react-dom.development.js:86
Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
at p
at http://localhost:3000/static/js/bundle.js:6140:66
at Typography (http://localhost:3000/static/js/bundle.js:46766:87)
at div
at http://localhost:3000/static/js/bundle.js:6140:66
at Toolbar (http://localhost:3000/static/js/bundle.js:45655:82)
at header
at http://localhost:3000/static/js/bundle.js:6140:66
at Paper (http://localhost:3000/static/js/bundle.js:40510:82)
at http://localhost:3000/static/js/bundle.js:6140:66
at AppBar (http://localhost:3000/static/js/bundle.js:25701:83)
at div
at http://localhost:3000/static/js/bundle.js:6140:66
at Grid (http://localhost:3000/static/js/bundle.js:33861:87)
at Login (http://localhost:3000/static/js/bundle.js:3249:5)
at p
at http://localhost:3000/static/js/bundle.js:6140:66
at Typography (http://localhost:3000/static/js/bundle.js:46766:87)
at div
at http://localhost:3000/static/js/bundle.js:6140:66
at Box (http://localhost:3000/static/js/bundle.js:50403:72)
at div
at TabPanel (http://localhost:3000/static/js/bundle.js:311:7)
at div
at http://localhost:3000/static/js/bundle.js:6140:66
at Paper (http://localhost:3000/static/js/bundle.js:40510:82)
at div
at http://localhost:3000/static/js/bundle.js:6140:66
at Grid (http://localhost:3000/static/js/bundle.js:33861:87)
at SignInOutContainer (http://localhost:3000/static/js/bundle.js:348:74)
at Routes (http://localhost:3000/static/js/bundle.js:108594:5)
at Router (http://localhost:3000/static/js/bundle.js:108527:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:107336:5)
at App (http://localhost:3000/static/js/bundle.js:73:56)
at AuthContextProvider (http://localhost:3000/static/js/bundle.js:5226:5)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
validateDOMNesting @ react-dom.development.js:10849
createInstance @ react-dom.development.js:10930
completeWork @ react-dom.development.js:22187
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Similarly, total 5 warnings visible at different sections of the code. I tried defining the span via components but still no improvement:
react-dom.development.js:86
Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
Warning: validateDOMNesting(...): <header> cannot appear as a descendant of <p>.
Warning: validateDOMNesting(...): <h2> cannot appear as a descendant of <p>.
Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <p>.
- The login code is something like this:
return (
<Grid container direction="row" alignItems="center">
<AppBar color="inherit" position="fixed">
<Toolbar>
<NavLink to="/" style={{ textDecoration: "none" }}>
<Box
component="img"
src={devicon}
width="30px"
height="30px"
paddingRight={1}
paddingTop={0.8}
/>
</NavLink>
<Typography
color="green"
flexGrow={1}
fontWeight="bold"
display="flex"
sx={{
alignSelf: "center",
fontSize: { xs: "1.125rem", sm: "2.125rem" },
}}
>
devplatform
</Typography>
<Stack spacing={1} direction="row">
<Button
variant="outlined"
color="success"
size="small"
href="/login"
>
Login
</Button>
<Button
variant="contained"
color="success"
size="small"
href="/signup"
>
Sign Up
</Button>
</Stack>
</Toolbar>
</AppBar>
<Grid
container
component="span"
direction="row"
alignItems="center"
>
<Paper style={paperStyle}>
<Grid align="center">
<Avatar style={avatarStyle}>
<LockOutlinedIcon />
</Avatar>
<h2 style={headerStyle}>Member Login</h2>
</Grid>
<Formik initialValues={initialValues}>
{(props) => (
<Form onSubmit={handleLogin}>
<span className="uname">
<Field
as={TextField}
label="Username"
name="email"
placeholder="Enter Username"
variant="standard"
fullWidth
required
color="success"
helperText={<ErrorMessage name="email" />}
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</span>
<span className="passwd">
<Field
as={TextField}
label="Password"
name="password"
placeholder="Enter Password"
variant="standard"
type="password"
fullWidth
required
color="success"
autoComplete="off"
helperText={<ErrorMessage name="password" />}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</span>
<span className="login-remember">
<Field
as={FormControlLabel}
name="remember"
control={<Checkbox color="success" />}
label="Remember me"
/>
</span>
<span className="signin-button">
<Button
variant="contained"
type="submit"
color="success"
style={btnStyle}
fullWidth
disabled={props.isSubmitting}
>
{props.isSubmitting ? "Loading" : "Sign In"}
</Button>
{error && (
<span className="span">Wrong email or password</span>
)}
</span>
</Form>
)}
</Formik>
<span className="endcontent">
<Typography
component={'div'}
sx={{ fontFamily: "Roboto, sans-serif", marginTop: "25px" }}
>
<Link href="/forget-password"> Forgotten password?</Link>
</Typography>
<Typography
component={'div'}
sx={{ fontFamily: "Roboto, sans-serif" }}
>
{" "}
New to this domain ?{" "}
<Link onClick={() => handleChange("event", 1)}>Join now </Link>
</Typography>
</span>
</Paper>
</Grid>
</Grid>
);
Any idea how to resolve this ?