I have a very simple problem in my react app. I need to turn on the switch value if it is true otherwise false. I already initialize the value as true but the switch is still off.
Pls check this code-sandbox link
CLICK THIS
<Grid item xs="{12}" md="{6}">
<FormControlLabel
name="buy"
variant="outlined"
value="{values.buy}"
onChange="{handleChange}"
onBlur="{handleBlur}"
control="{<Switch"
color="primary"
/>} label="Triage?" labelPlacement="end" style={{ display: "flex",
justifyContent: "flex-end" }} />
</Grid>
You have to use checked property
...
<Switch checked={values.buy} color="primary" />
UPDATE
To be precise: add checked in the place where you pass the Switch control. All other code should not be touched
... your code
control={<Switch checked={values.buy} color="primary" />}
... your code
The on/off state of the switch is controlled by property 'checked'. You can set it in both FormControlLabel and Switch components.
Here's the code for setting it in the FormControlLabel:
<Grid item xs={12} md={6}>
<FormControlLabel
name="buy"
variant="outlined"
value={values.buy}
checked={values.buy}
onChange={handleChange}
onBlur={handleBlur}
control={<Switch color="primary" />}
label="Triage?"
labelPlacement="end"
style={{ display: "flex", justifyContent: "flex-end" }}
/>
</Grid>
Here's the second option, to set it in Switch:
<Grid item xs={12} md={6}>
<FormControlLabel
name="buy"
variant="outlined"
value={values.buy}
onChange={handleChange}
onBlur={handleBlur}
control={<Switch color="primary" checked={values.buy} />}
label="Triage?"
labelPlacement="end"
style={{ display: "flex", justifyContent: "flex-end" }}
/>
</Grid>
Both seems to work fine.
Related
I have a user registration form that renders error messages when the input fields fail the validation. When the error messages are rendered, all the elements become wider. How can I prevent them from becoming wider?
It seems that the following lines are causing it to expand:
{errors.name && <p>{errors.name.message}</p>}
{errors.email && <p>{errors.email.message}</p>}
{errors.password && <p>{errors.password.message}</p>}
I'm also using Material UI, and react-hook-form.
Before error:
After error:
My code:
return (
<Box
sx={{
marginTop: 8,
display: "flex",
flexDirection: "column",
alignItems: "center"
}}>
<Typography
variant="h2"
sx={{
color: theme.palette.text.primary,
fontWeight: "bold"
}}
>
{Constants.Create.REGISTER_HEADER}
</Typography>
<Typography
variant="h4"
sx={{
color: theme.palette.text.secondary
}}
>
{Constants.Create.REGISTER_SUBHEADER}
</Typography>
<Box component="form" noValidate onSubmit={handleSubmit(onSubmit)} sx={{ mt: 2 }}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Typography
variant="subtitle1"
sx={{
color: theme.palette.text.secondary
}}
>
{Constants.Create.NAME_HEADER}
</Typography>
</Grid>
<Grid item xs={12}>
<Controller
name="name"
control={control}
render={({ field }) => (<TextField
{...field}
margin="normal"
required
fullWidth
id="name"
label="Required"
variant="filled"
size="small"
sx={{
marginTop: "0px"
}}
/>
)}
/>
{errors.name && <p>{errors.name.message}</p>}
</Grid>
<Grid item xs={12}>
<Typography
variant="subtitle1"
sx={{
color: theme.palette.text.secondary
}}
>
{Constants.Create.EMAIL_HEADER}
</Typography>
</Grid>
<Grid item xs={12}>
<Controller
name="email"
control={control}
render={({ field }) => (<TextField
{...field}
margin="normal"
required
fullWidth
id="email"
label="Required"
variant="filled"
size="small"
sx={{
marginTop: "0px"
}}
/>
)}
/>
{errors.email && <p>{errors.email.message}</p>}
</Grid>
<Grid item xs={12}>
<Typography
variant="subtitle1"
sx={{
color: theme.palette.text.secondary
}}
>
{Constants.Create.PASSWORD_HEADER}
</Typography>
</Grid>
<Grid item xs={12}>
<Controller
name="password"
control={control}
render={({ field }) => (<TextField
{...field}
type="password"
margin="normal"
required
fullWidth
id="password"
label="Required"
variant="filled"
size="small"
sx={{
marginTop: "0px"
}}
/>
)}
/>
<Box>
{errors.password && <p>{errors.password.message}</p>}
</Box>
</Grid>
<Grid item xs={12}>
<FormControlLabel
...
/>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
size="large"
sx={{ mt: 2, mb: 2 }}
>
{Constants.Create.CREATE_ACCOUNT}
</Button>
</Box>
</Box >
)
How can I sort of fix the width of the elements? Or prevent the error messages from increasing the width?
Use CSS for this. Make sure your HTML elements <input> have the following styling:
input {
display: block;
width: 100%
}
CSS should keep the size of your HTML elements, before and after the JS validation.
I am new to react and was using material ui. I was trying to place a card in a grid item.
here is my code:
<GridItem xs={12} sm={12} md={12} style={{ margin: "0rem" }}>
<Card style={{ margin: "0rem" }}>
<GridItem xs={2} sm={2} md={2}>
{/* <Card style={{ margin: "0rem" }}> */}
<GridItem xs={12} style={{ margin: "0rem" }}>
<CustomOutlineInput
style={{ margin: "0rem" }}
id="coilID"
label="Coil ID"
variant="outlined"
size="small"
/>
</GridItem>
{/* </Card> */}
</GridItem>
</Card>
</GridItem>;
However as you can see some extra spacing is generated in this way how do I remove this and make colums inside the grid item:
Also how do I add text boxes in a single row without increasing the spacing?
each element is taking extra space:
I hope your day is going well. I am a new user of material UI and I am working on building my first profile page (image below).
As I am getting closer to building this page, I am struggling to create a grid system that allows the about section to be directly under the three panels (see image below).
How do I remove the padding between the about section and three pannels (code below)?
return (
<>
<Helmet>
<title>Dashboard: Project Details | Material Kit Pro</title>
</Helmet>
<Box
sx={{
backgroundColor: 'background.default',
minHeight: '100%',
py: 8
}}
>
<Container >
<AppBar></AppBar>
<Grid container spacing={1}>
<Grid item xs={12} md={3}>
<Box
style={{ height: '100%', width: '100%'}}
>
<WritersSidePanel />
</Box>
</Grid>
<Grid item xs={12} md={9}>
<WritersPageTopPanel />
</Grid>
<Box style={{ marginDown: '90%'}}>
<Grid item xs={12} container
direction="column"
alignItems="flex-end"
justify="flex-end">
<Box
style={{ width: '75%', height: '100%'}}
>
<AboutSection description={description} />
</Box>
</Grid>
<Grid item xs={12} container
direction="column"
alignItems="flex-end"
justify="flex-end">
<Box
style={{ width: '75%'}}
>
<SampleStory description={description} />
</Box>
</Grid>
</Box>
</Grid>
</Container>
</Box>
</>
);
};
RadioButton checked field is not working for [No] by default .I had implemented it to set default as No and disable it and for Yes to update the fields
By default its coming unchecked for the both fields if i refresh the page.
I need to make it default for "NO"
Tried to fix the issue in various methods and ways but it's not fixing. I am not able to know why it's getting an error I don't understand the exact issue in the code. Could anyone help with the solution?
if i click Yes the user fields should be editable
code:
import React from "react";
import {
Box,
Typography,
Grid,
Link,
FormLabel,
RadioGroup,
Radio,
FormControlLabel,
} from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import { TextField, CurrencyTxtField } from "components/core";
const useStyles = makeStyles(() => ({
dinline: {
display: "inline",
},
fieldproductTester: {
fontWeight: 700,
},
}));
const ProductTester = ({
errors,
values,
handleChange,
handleBlur,
refProp,
}) => {
const classes = useStyles();
return (
<div ref={refProp}>
<FormLabel color="secondary" component="legend" mb={2}>
<Typography variant="h4" component="h4">
Testers
</Typography>
</FormLabel>
<Box pt={2}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Typography component="div" color="textPrimary">
Would you like to give your customers the option to purchase a
tester of this product?if so,please include information about the
tester in the product description.
</Typography>
</Grid>
<Grid item xs={8}>
<RadioGroup
className={classes.dinline}
aria-label="tester"
name="tester"
value={values.tester}
onChange={handleChange}
disabled={!values.tester}
>
<FormControlLabel value="Yes" control={<Radio />} label="Yes"/>
<FormControlLabel
value="No"
control={<Radio />}
label="No"
enabled={values.tester === "No"}
/>
</RadioGroup>
</Grid>
{values.tester && (
<>
<Grid item xs={12}>
<Typography
variant="inherit"
className={classes.fieldproductTester}
>
Tester Price
</Typography>
</Grid>
<Grid item xs={8}>
<CurrencyTxtField
id="testerPrice"
name="testerPrice"
label=" "
variant="outlined"
value={values.testerPrice}
currencySymbol="$"
outputFormat="number"
digitGroupSeparator=""
textAlign="left"
onChange={handleChange}
onBlur={handleBlur}
error={!!errors.testerPrice}
helperText={errors.testerPrice ? errors.testerPrice : ""}
disabled={values.tester === "No"}
/>
</Grid>
<Grid item xs={12}>
<Typography
variant="inherit"
className={classes.fieldproductTester}
>
Tester SKU
</Typography>
</Grid>
<Grid item xs={8}>
<TextField
id="productSku"
name="sku"
label=""
ariaLabel="SKU"
value={values.sku}
disabled={values.tester === "No"}
/>
</Grid>
</>
)}
</Grid>
</Box>
</div>
);
};
export default ProductTester;
I've tested the following configuration - it works as expected. "No" is selected as a default value. Try to use this code as a reference point and then add all additional functionality step by step to see when it stops working.
<RadioGroup
aria-label="tester"
name="tester"
defaultValue="No">
<FormControlLabel
value="Yes"
control={<Radio />}
label="Yes"/>
<FormControlLabel
value="No"
control={<Radio />}
label="No"/>
</RadioGroup>
i am trying to render the elements of the array inside a custom card component inside a grid. but when the page opens it freezes and the console displays "Uncaught TypeError: Cannot read property 'muiName' of undefined"
the custom component
LookupMedication = (medicationName) => {
return (
<Grid xs={3} item>
<Card
style={{
width: "18em",
marginBottom: "2em",
}}
>
<CardActionArea>
<CardMedia
style={{
height: "8em",
}}
image={Meds}
title={medicationName}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{medicationName}
</Typography>
<TextField
fullWidth
label="Amount Available"
variant="outline"
type="number"
></TextField>
</CardContent>
</CardActionArea>
<CardActions>
<Button
fullWidth
style={{
color: "white",
backgroundColor: "#1818",
}}
startIcon={<PostAddIcon />}
>
Add
</Button>
</CardActions>
</Card>
</Grid>
);
};
the map function
<Grid container>
{this.medications.map((medication) =>
this.LookupMedication(medication)
)}
</Grid>
Any help is appreciated
You need to add muiName to your component
Underneath LookupMedication just add the code.
LookupMedication.muiName = 'Grid';
For more detail about muiName check out this answer