We Keep Coding

I want to make mui textfield with array

what my task is I am using TextFiled according to the Array but the issue is not able to change this all value dynamically I am aware I can use the index to this task based on ternary conditions.
const TextField = () => {
return (
<>
<Card sx={{ mt: 4 }} variant="outlined">
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.fill("").map((data, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<TextField
id="outlined-basic"
label={data}
name={index === 0}
size="small"
variant="outlined"
value={data}
/>
</Grid>
))}
</Grid>
</CardContent>
</Card>
</>
);
};

return (
<>
<Card sx={{ mt: 4 }} variant="outlined">
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from([
"organisationName",
"organisationID",
"manager",
"branch",
"product"
]).map((data, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<TextField
id="outlined-basic"
label={data}
name="organisationName"
size="small"
variant="outlined"
value={teamForm.values.data}
onBlur={teamForm.handleBlur}
onChange={teamForm.handleChange.bind(this)}
error={Boolean(teamForm.errors.data)}
helperText={teamForm.errors.data}
/>
</Grid>
))}
</Grid>
</CardContent>
<CardActions>
<Box
display="flex"
flexGrow={1}
alignItems="center"
justifyContent="flex-end"
flexDirection="row"
>
<Button
variant="contained"
color="primary"
onClick={teamForm.handleSubmit}
>
Add team
</Button>
</Box>
</CardActions>
</Card>
</>
)

import React from "react";
import {
Grid,
Card,
CardContent,
Box,
CardActions,
TextField,
Button
} from "#mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";
const validationSchema = Yup.object().shape({
organisationName: Yup.string().required("Required!"),
organisationID: Yup.string().required("Required!"),
manager: Yup.string().required("Required!")
});
const AddNewTeam = () => {
const teamForm = useFormik({
initialValues: {
organisationName: "",
organisationID: "",
manager: "",
branch: "",
product: ""
},
validationSchema,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
}
});
console.log(teamForm);
return (
<>
<Card sx={{ mt: 4 }} variant="outlined">
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from([
"organisationName",
"organisationID",
"manager",
"branch",
"product"
]).map((data, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<TextField
id="outlined-basic"
label={data}
name="organisationName"
size="small"
variant="outlined"
value={teamForm.values.data}
onBlur={teamForm.handleBlur}
onChange={teamForm.handleChange.bind(this)}
error={Boolean(teamForm.errors.data)}
helperText={teamForm.errors.data}
/>
</Grid>
))}
</Grid>
</CardContent>
<CardActions>
<Box
display="flex"
flexGrow={1}
alignItems="center"
justifyContent="flex-end"
flexDirection="row"
>
<Button
variant="contained"
color="primary"
onClick={teamForm.handleSubmit}
>
Add team
</Button>
</Box>
</CardActions>
</Card>
</>
);
};
export default AddNewTeam;

How to hide a Material UI grid item?

I am trying to hide the grid item of a certain product and let the others slide in. Right now i am using the display:none property but it hides the item instantaneous. I already have the products filtered and i am checking i want to hide the products that are not filtered using somekind an animation. model:
import React, { useState, useEffect } from "react";
import { Container, Grid, Card, Skeleton, useMediaQuery, Grow, } from "#mui/material";
import Filter from "./Filter";
import Product from "./Product/Product";
import { useParams } from "react-router-dom";
import { useSelector } from "react-redux";
import { Box } from "#mui/system";
const Products = () => {
const { category } = useParams();
const [sortOption, setSortOption] = useState("name");
const [newProducts, setNewProducts] = useState([]);
const [menu, setMenu] = useState(false);
useEffect(() => {
const selectedSort = sessionStorage.getItem("sortOption") || "name";
setSortOption(selectedSort);
}, []);
const sort = (items, option) => {
switch (option) {
case "name":
return items.sort((a, b) => (a.name > b.name ? 1 : -1));
case "up":
return items.sort((a, b) => (a.price.raw > b.price.raw ? 1 : -1));
case "down":
return items.sort((a, b) => (a.price.raw < b.price.raw ? 1 : -1));
default:
return items.sort((a, b) => (a.name > b.name ? 1 : -1));
}
};
const mobile = useMediaQuery("(max-width:600px)");
const { products, loading } = useSelector((state) => state.products);
let items = products.filter((product) => product.categories[0].slug === category);
let newItems = [];
newProducts.forEach((product) => {
items.forEach((item) => {
if (item.id === product.id) newItems.push(item);
});
});
if (newProducts.length > 0) newItems = sort(newItems, sortOption);
else newItems = sort(items, sortOption);
const renderProducts = () => (
<>
<Container maxWidth="lg" >
<Grid
container
direction="row"
spacing={3}
sx={{
pl: !mobile && menu && "300px",
transition: ".3s",
}}>
{items.map((product) => (
newItems.some(newItem => newItem.id === product.id) ? (
<Grid item xs={12} sm={6} md={4} lg={3} key={product.id} >
<Product product={product} disable={newItems.some(newItem => newItem.id === product.id)} />
</Grid>
) : null
))}
</Grid>
</Container>
</>
);
const loadingView = () => (
<Container maxWidth="lg" >
<Grid
container
direction="row"
spacing={3}
sx={{
pl: !mobile && menu && "300px",
transition: ".3s",
}}>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
<Box sx={{ p: 2 }}>
<Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
<Card variant="flex" flex="flex">
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
</Card>
<Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
</Box>
<Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
<Box sx={{ p: 2 }}>
<Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
<Card variant="flex" flex="flex">
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
</Card>
<Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
</Box>
<Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Skeleton variant="rectangular" width="100%" sx={{ height: ["60vh", "50vh"], mb: 1 }} />
<Box sx={{ p: 2 }}>
<Skeleton variant="text" width="100%" sx={{ height: "20px", mb: 1 }} />
<Card variant="flex" flex="flex">
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", mr: 1 }} />
<Skeleton variant="rectangular" width="30px" sx={{ height: "10px", }} />
</Card>
<Skeleton variant="text" width="50%" sx={{ height: "20px" }} />
</Box>
<Skeleton variant="rectangular" width="100%" sx={{ height: "35px" }} />
</Grid>
</Grid>
</Container>
);
return <>
<Filter
sortOption={sortOption}
setSortOption={setSortOption}
menu={menu}
setMenu={setMenu}
products={items}
setNewProducts={setNewProducts}
category={category}
/>
{!loading ? renderProducts() : loadingView()}</>;
};
export default Products;

You need to filter the items as you expect by color or size first.
...
const filteredProducts = newItems.filter(newItem => newItem.id === product.id);
...
<Container maxWidth="lg" >
<Grid
container
// You don't need to use direction="row" since it is default props value
spacing={3}
>
{filteredProducts.map((product) => (
<Grid item xs={12} sm={6} md={4} lg={3} key={product.id}>
<Product product={product} disable={newItems.some(newItem => newItem.id === product.id)} />
</Grid>
))}
</Grid>
</Container>
...
If you want to filter the products more accurately, then you could build a customer filter function. Please refer to this.

Whenever invite button is clicked new form should be added everytime and when delete button clicked form gets deleted can anyone help me in this?

Invite.js
this is my invite component in which invite button is outside of the form and delete button is inside of form.I want if delete button is click form should be deleted In this I've used use state and I've have taken this form from material-ui help me if any one can how I can solve my problem ?
import * as React from "react";
import Box from "#mui/material/Box";
import FormControl from "#mui/material/FormControl";
import TextField from "#mui/material/TextField";
import AccountCircle from "#mui/icons-material/AccountCircle";
import Button from "#mui/material/Button";
import DeleteIcon from "#mui/icons-material/Delete";
import AddIcon from "#mui/icons-material/Add";
import Stack from "#mui/material/Stack";
const Invites = () => {
const [ addForm,setAddForm]=React.useState(false)
const [deleteForm, setdeleteForm]=React.useState(false)
const setAddFormHandler = () => {
console.log("clicked");
setAddForm(true);
};
const deleteHandler=()=>{
setdeleteForm(true)
}
return (
<>
<Stack direction="row" spacing={2}>
<Button
variant="contained"
color="info"
startIcon={<AddIcon />}
onClick={setAddFormHandler}
>
ADD INVITE
</Button>
</Stack>
{addForm ?<Box sx={{ "& > :not(style)": { m: 1 } }}>
<FormControl>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Stack
direction="row"
spacing={4}
style={{ marginLeft: 30, marginTop: 18, width: 500 }}
>
<Button variant="contained" size="large" startIcon={<DeleteIcon />} onClick=
{deleteHandler}>
Delete
</Button>
</Stack>
</FormControl>
</Box>:null}
</>
);
};
export default Invites;

First of all your question is confusing. So i'm adding two solutions here which addresses two perspectives of the problem, you can choose the one matching yours.
Sol 1: You want to create new form for each click on invite button (multiple forms)
The below solution will add new forms to the same page every time the invite button is clicked and delete the respective form once the delete button is clicked.
import * as React from "react";
import Box from "#mui/material/Box";
import FormControl from "#mui/material/FormControl";
import TextField from "#mui/material/TextField";
import AccountCircle from "#mui/icons-material/AccountCircle";
import Button from "#mui/material/Button";
import DeleteIcon from "#mui/icons-material/Delete";
import AddIcon from "#mui/icons-material/Add";
import Stack from "#mui/material/Stack";
const Invites = () => {
const [forms, setForm] = React.useState({ val: []});
function createcustomForms() {
return forms.val.map((el, i) =>
<div key={i}>
<Box sx={{ "& > :not(style)": { m: 1 } }}>
<FormControl>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Box sx={{ display: "flex", alignItems: "flex-end", marginTop: 2 }}>
<AccountCircle sx={{ color: "action.active", mr: 1, my: 0.5 }} />
<TextField
id="input-with-sx"
label="With sx"
variant="filled"
/>
</Box>
<Stack
direction="row"
spacing={4}
style={{ marginLeft: 30, marginTop: 18, width: 500 }}
>
<Button variant="contained" size="large" startIcon={<DeleteIcon />}
onClick={(e) => removeForm(i)}>
Delete
</Button>
</Stack>
</FormControl>
</Box>
</div>
);
}
const addForm = () => {
setForm({ val: [...forms.val, '']})
}
const removeForm = (i) => {
let vals = [...forms.val];
vals.splice(i,1);
setForm({ val: vals });
}
return (
<>
<Stack direction="row" spacing={2}>
<Button
variant="contained"
color="info"
startIcon={<AddIcon />}
onClick={addForm}
>
ADD INVITE
</Button>
</Stack>
{createcustomForms()}
</>
);
};
export default Invites;
Sol 2 : You want to create a form when invite button is clicked and delete it when delete button is clicked (currently in your code delete is not working)
const deleteHandler=()=>{
setdeleteForm(true)
}
should be changed to
const deleteHandler=()=>{
setAddForm(false);
}

React Edit values are not bind in dynamic input select

I have create an dynamic input select field ,in that field creating editable I am try to bind some data predefined But I am set Data but it takes only index but values are not updated in fields.
My code: https://codesandbox.io/s/dynamic-select-update-n1k9v
Input Fields Data
const [roomInputs, setRoomInputs] = useState([
{ boardBasic: "", roomType: "", adult: "", child: "" }
]);
Predefined Data to set in input fields
const updateData = [
{
id: "1",
boardBasic: "roomOnly",
roomType: "Delux Room",
adult: "2",
child: "2"
},
{
id: "2",
boardBasic: "fullBoard",
roomType: "Delux Room",
adult: "2",
child: "2"
}
];
useEffect(() => {
roomDataInput();
}, []);
const roomDataInput = () => {
setRoomInputs(updateData);
};
Input Fields
<form onSubmit={handleSubmit}>
{roomInputs.map((x, i) => (
<div key={i}>
<Grid container spacing={2}>
<Grid item sm={12} lg={2} xs={12}>
<Select
name="roomType"
placeholder="Room Type"
isSearchable
value={options.value}
options={options2}
onChange={(option) =>
handleRoomChangeType(option, i, "roomType")
}
/>
</Grid>
<Grid item lg={2} sm={12} xs={12}>
<Select
name="boardBasic"
placeholder="Board Basic"
value={options.value}
onChange={(option) =>
handleRoomChangeBoard(option, i, "boardBasic")
}
options={BoardBasic}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
<Select
name="adult"
placeholder="Adult"
value={options.value}
onChange={(option) =>
handleRoomChangeAdult(option, i, "adult")
}
options={options}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
<Select
name="child"
placeholder="Child"
value={options.value}
onChange={(option) =>
handleRoomChangeChild(option, i, "child")
}
options={options}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
{roomInputs.length !== 1 && (
<DeleteIcon
onClick={() => handleRemoveClickRoom(i)}
style={{
marginRight: "10px",
marginTop: "4px",
cursor: "pointer"
}}
/>
)}
{roomInputs.length - 1 === i && (
<AddCircleOutlineIcon
onClick={handleAddClickRoom}
style={{ marginTop: "4px", cursor: "pointer" }}
/>
)}
</Grid>
</Grid>
</div>
))}
<Button type="submit" variant="contained" color="primary">
Submit
</Button>
</form>

You should change default state value to updateData and remove useEffect:
const [roomInputs, setRoomInputs] = useState(updateData);
// useEffect(() => {
// roomDataInput();
// }, []);
Also set defaultValue for all the selects in the map:
{roomInputs.map((x, i) => (
<div key={i}>
<Grid container spacing={2}>
<Grid item sm={12} lg={2} xs={12}>
<Select
defaultValue={options2.find((y) => y.value == x.roomType)}
name="roomType"
placeholder="Room Type"
isSearchable
value={options.value}
options={options2}
onChange={(option) =>
handleRoomChangeType(option, i, "roomType")
}
/>
</Grid>
<Grid item lg={2} sm={12} xs={12}>
<Select
defaultValue={BoardBasic.find(
(y) => y.value === x.boardBasic
)}
name="boardBasic"
placeholder="Board Basic"
value={options.value}
onChange={(option) =>
handleRoomChangeBoard(option, i, "boardBasic")
}
options={BoardBasic}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
<Select
defaultValue={options.find((y) => y.value == x.adult)}
name="adult"
placeholder="Adult"
value={options.value}
onChange={(option) =>
handleRoomChangeAdult(option, i, "adult")
}
options={options}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
<Select
defaultValue={options.find((y) => y.value == x.child)}
name="child"
placeholder="Child"
value={options.value}
onChange={(option) =>
handleRoomChangeChild(option, i, "child")
}
options={options}
/>
</Grid>
<Grid item sm={12} lg={2} xs={12}>
{roomInputs.length !== 1 && (
<DeleteIcon
onClick={() => handleRemoveClickRoom(i)}
style={{
marginRight: "10px",
marginTop: "4px",
cursor: "pointer"
}}
/>
)}
{roomInputs.length - 1 === i && (
<AddCircleOutlineIcon
onClick={handleAddClickRoom}
style={{ marginTop: "4px", cursor: "pointer" }}
/>
)}
</Grid>
</Grid>
</div>
))}

Server Error ReferenceError: window is not defined This error happened while generating the page

I want to add Microsoft Login Button in Next Js using material Ui but
when I add package from NPM and refresh the page I got the above
error.
When I Assign ClientId="a973536f-eb3e-4fd9-9394-9f4194d69153" to Microsoft component as shown below I got the above error. How to cope with this error.
import React from "react";
import { Grid, Container, Checkbox, IconButton, FormControlLabel, TextField, Button, Link } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import Icon from "#material-ui/core/Icon";
import { loadCSS } from "fg-loadcss";
import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";
import { GoogleLogin } from "react-google-login";
import MicrosoftLogin from "react-microsoft-login";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(0),
display: "flex",
flexDirection: "column",
alignItems: "center",
height: '60vh',
},
background: {
backgroundColor: "#220E1A",
borderRadius: "5px",
color: "white",import React from "react";
import { Grid, Container, Checkbox, IconButton, FormControlLabel, TextField, Button, Link } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import Icon from "#material-ui/core/Icon";
import { loadCSS } from "fg-loadcss";
import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";
import { GoogleLogin } from "react-google-login";
import MicrosoftLogin from "react-microsoft-login";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(0),
display: "flex",
flexDirection: "column",
alignItems: "center",
height: '60vh',
},
background: {
backgroundColor: "#220E1A",
borderRadius: "5px",
color: "white",
},
form: {
width: "70%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
input1: {
background: "white",
borderRadius: "25px",
color: "white",
},
submit: {
margin: theme.spacing(1, 0, 1),
borderRadius: "25px",
},
buttonGroup: {
borderRadius: "50px",
margin: theme.spacing(2, 0, 2, 0),
},
winIcon: {
padding: '0px',
margin: '0px',
width: '10px'
}
}));
export default function SignIn() {
const classes = useStyles();
//Load Fonts awesome icons
React.useEffect(() => {
const node = loadCSS(
"https://use.fontawesome.com/releases/v5.12.0/css/all.css",
document.querySelector("#font-awesome-css")
);
return () => {
node.parentNode.removeChild(node);
};
}, []);
//google facebook,Microsoft Login response
const responseFacebook = (response) => {
console.log(response);
};
const responseGoogle = (response) => {
console.log(response);
};
const authHandler = (err, data) => {
console.log(err, data);
};
return (
<Container maxWidth="xm" className={classes.background}>
<div className={classes.paper}>
<form className={classes.form} noValidate>
<TextField
className={classes.input1}
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoFocus
variant="filled"
/>
<TextField
className={classes.input1}
variant="filled"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Grid
container
direction="column"
justify="center"
alignItems="center"
>
<Grid item >
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Stay signed in"
/>
</Grid>
<Grid item>
<Button
type="submit"
medium
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</Grid>
<Grid item>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<h3 align="center">Or Via</h3>{" "}
<FacebookLogin
appId="225241158739281"
autoLoad
callback={responseFacebook}
render={(renderProps) => (
<IconButton color="primary" onClick={renderProps.onClick}>
<Icon className="fab fa-facebook" />
</IconButton>
)}
/>
<GoogleLogin
clientId="500452257814-peb71oi9612hv04svvfpvfrtch6pc5br.apps.googleusercontent.com"
render={(renderProps) => (
<IconButton
onClick={renderProps.onClick}
>
{" "}
<Icon className="fab fa-google" color="primary" />
</IconButton>
)}
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={"single_host_origin"}
/>
//**Problem is here IN MicrosoftLogin when i assign Id it creates the above error.**
<MicrosoftLogin
// clientId="a973536f-eb3e-4fd9-9394-9f4194d69153"
authCallback={authHandler}
redirectUri="https://localhost:3000/"
className={classes.winIcon}
children={
<IconButton>
<Icon className="fab fa-windows" color="primary" />
</IconButton>}
/>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}
},
form: {
width: "70%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
input1: {
background: "white",
borderRadius: "25px",
color: "white",
},
submit: {
margin: theme.spacing(1, 0, 1),
borderRadius: "25px",
},
buttonGroup: {
borderRadius: "50px",
margin: theme.spacing(2, 0, 2, 0),
},
winIcon: {
padding: '0px',
margin: '0px',
width: '10px'
}
}));
export default function SignIn() {
const classes = useStyles();
//Load Fonts awesome icons
React.useEffect(() => {
const node = loadCSS(
"https://use.fontawesome.com/releases/v5.12.0/css/all.css",
document.querySelector("#font-awesome-css")
);
return () => {
node.parentNode.removeChild(node);
};
}, []);
//google facebook,Microsoft Login response
const responseFacebook = (response) => {
console.log(response);
};
const responseGoogle = (response) => {
console.log(response);
};
const authHandler = (err, data) => {
console.log(err, data);
};
return (
<Container maxWidth="xm" className={classes.background}>
<div className={classes.paper}>
<form className={classes.form} noValidate>
<TextField
className={classes.input1}
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoFocus
variant="filled"
/>
<TextField
className={classes.input1}
variant="filled"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Grid
container
direction="column"
justify="center"
alignItems="center"
>
<Grid item >
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Stay signed in"
/>
</Grid>
<Grid item>
<Button
type="submit"
medium
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</Grid>
<Grid item>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<h3 align="center">Or Via</h3>{" "}
<FacebookLogin
appId="225241158739281"
autoLoad
callback={responseFacebook}
render={(renderProps) => (
<IconButton color="primary" onClick={renderProps.onClick}>
<Icon className="fab fa-facebook" />
</IconButton>
)}
/>
<GoogleLogin
clientId="500452257814-peb71oi9612hv04svvfpvfrtch6pc5br.apps.googleusercontent.com"
render={(renderProps) => (
<IconButton
onClick={renderProps.onClick}
>
{" "}
<Icon className="fab fa-google" color="primary" />
</IconButton>
)}
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={"single_host_origin"}
/>
//**Problem is here IN MicrosoftLogin when i assign Id it creates the above error.**
<MicrosoftLogin
// clientId="a973536f-eb3e-4fd9-9394-9f4194d69153"
authCallback={authHandler}
redirectUri="https://localhost:3000/"
className={classes.winIcon}
children={
<IconButton>
<Icon className="fab fa-windows" color="primary" />
</IconButton>}
/>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}

It's related to server side rendering and client side rendering.
As Next.js provides SSR, you need to consider using objects like window, localStorage and so on. While compiling client side, those objects are fine but when Nextjs compiles server side, it shows error like you shared.
It seems like GoogleLogin uses window object if you assign the client id. You need to check that first. And lemme know the result.

Hey the easy way for Material UI Components, to rendered it on Next js framework.Just use component to render it on client side only.
(If any component use Window object on server side it will show this error)
solution:
import NoSsr from '#material-ui/core/NoSsr';
<NoSsr>
<MicrosoftLogin
clientId="a973536f-eb3e-4fd9-9394-9f4194d69153"
authCallback={authHandler}
redirectUri="https://localhost:3000/"
className={classes.winIcon}
children={
<IconButton>
<Icon className="fab fa-windows" color="primary" />
</IconButton>
}
/>
</NoSsr>