Develop Reference

How to create a function which auto populate / fills, the text fields of a grid on a button click event. (Using react function components.)

I need to auto populate/fill below text fields when a user clicks the "Add Data" button, to do this I have to use react functional components not class components.
Please help me I'm quiet new to using React JS. Thank you.
const grid = () => {
const [data, setData] = useState(
{
Name:'',
Age:'',
Address:'',
Gender:''
)
const showResults = (e) =>{
setData(
{
Name:'John',
Age:'21',
Address:'New York',
Gender:'Male'
})}
return(
<SolutionContainer>
<DemoContainer>
<Grid>
<Grid item xs={12}>
<TextField
varient="outlined"
label="Name"
name="Name"
/>
</Grid>
<Grid>
<Grid item xs={12}>
<TextField
varient="outlined"
label="Age"
name="Age"
/>
</Grid>
<Grid>
<Grid item xs={12}>
<TextField
varient="outlined"
label="Address"
name="Address"
/>
</Grid>
<Grid>
<Grid item xs={12}>
<TextField
varient="outlined"
label="Gender"
name="Gender"
/>
</Grid>
<Grid item xs={12}>
<StyledButton
varient = "outlined"
color = "Blue"
onClick = {showResults}
>
Add Data
</StyledButton>
</Grid>
</Grid>
</DemoContainer>
</SolutionContainer>
)
}

add space between 2 fields in the same row

How can I add some space between the two text fields in the same row? I tried adding margins and paddings, even display flex in the css but nothing seems to work for me.
import "./styles.css";
import TextField from "#material-ui/core/TextField";
import "./App.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div className="labels">
<TextField id="filled-basic" label="First Label" variant="filled" />
<TextField id="filled-basic" label="Second Label" variant="filled" />
</div>
</div>
);
}
Codesandbox: https://codesandbox.io/s/wild-cache-7cjow?file=/src/App.js:0-471

Check how this is done in Material ui docs.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: '25ch',
},
},
}));
export default function BasicTextFields() {
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off">
<TextField id="standard-basic" label="Standard" />
<TextField id="filled-basic" label="Filled" variant="filled" />
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</form>
);
}

When I put margin inline it works fine:
<TextField id="filled-basic" style={{ marginRight: "10px" }} label="First Label" variant="filled" />

Why don't you use Grid? As for different screen sizes it will help you.
Here is how to get your desired output:
<Grid container spacing={1} alignItems="center">
<Grid item sm={6} xs={12}>
<TextField
label="Field 1"
name="f1"
type="text"
variant="outlined"
/>
</Grid>
<Grid item sm={6} xs={12}>
<TextField
label="Field 2"
name="f2"
type="text"
variant="outlined"
/>
</Grid>
</Grid>

This works:
.MuiInputBase-root {
margin: 10px;
}
When I look at the elements in developer tools the classes and ids don't seem to render as one would expect given how they are coded in the component. For example the inputs seem to be wrapped in an element that has the class MuiInputBase-root.
Using that as the selector in the CSS and applying the style to it worked.

RadioButton checked field is not working for [No] by default .I had implemented it to set default as No and disable it

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>

React / MUI : How to call other class with hook to button in main App.js

I'm new to React/MUI.. I'm creating different components for now for a website, so the UI for now doesn't matter.
I'm facing this problem while trying to do a button to link me to the Sign Up page (Doing the same for Sign In):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ...
The following is my code:
SignUp.js
import React from 'react';
import Avatar from '#material-ui/core/Avatar';
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
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';
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%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function SignUp() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
autoComplete="fname"
name="firstName"
variant="outlined"
required
fullWidth
id="firstName"
label="First Name"
autoFocus
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
required
fullWidth
id="lastName"
label="Last Name"
name="lastName"
autoComplete="lname"
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox value="allowExtraEmails" color="primary" />}
label="I want to receive inspiration, marketing promotions and updates via email."
/>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign Up
</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>
);
}
App.js
import React from 'react';
import Container from '#material-ui/core/Container';
import Typography from '#material-ui/core/Typography';
import SignUp from './sign-up/SignUp.js';
import SignIn from './sign-in/SignIn.js';
import Box from '#material-ui/core/Box';
import Link from '#material-ui/core/Link';
import { Button, Paper } from '#material-ui/core';
export default function App() {
return (
<div>
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
Creating a website!
</Typography>
<ProTip />
<button onClick={SignUp}>
Click me!
</button>
<SignIn />
<Copyright />
</Box>
</Container>
</div>
);
}
How do I properly convert in this case?

You're trying to call a React component as an event handler:
<button onClick={SignUp}>
That will not work. Instead you can for example create a flag, set it to true in the onClick handler and then render SignUp based on this flag.
const [showSignUp, setShowSignUp]= React.useState(false)
...
<button onClick={()=>setShowSignUp(s=>!s)}>Click me!</button>
{showSignUp ? <SignUp /> : <SignIn />}

Error when passing a functional component to a class component as a component prop

I create a functional component and a class component.
In the render method I want to call my functional component as a component prop.
My code:
function projectList(props) {
const { classes } = props
return (
<div>
{projects.slice(0, 5).map(project => (
<Card className={classes.card} key={project.id}>
<CardHeader
classes={{ title: classes.h6, subheader:
classes.subtitle1 }}
title={project.projectName}
subheader={project.h5}
/>
<CardActionArea>
<CardMedia
component="img"
alt={project.h5}
className={classes.media}
image={project.img}
/>
<CardContent>
<Typography paragraph>
{project.paragraph}
</Typography>
</CardContent>
</CardActionArea>
<CardActions className={props.classes.actions}>
<Button
className={props.classes.projectButton}
component={Link}
to={project.pathname}
size="medium"
color="secondary"
>
Project Details
</Button>
</CardActions>
</Card>
))}
</div>
)
}
projectList.propTypes = {
classes: PropTypes.any.isRequired, // eslint-disable-line
}
class Projects extends Component {
static propTypes = {
classes: PropTypes.any.isRequired, // eslint-disable-line
}
render() {
const { classes } = this.props
return (
<Grid container className={classes.projectPage}
direction="row">
<Grid item xs />
<Grid item>
<Grid container alignItems="center" direction="column">
{/* Title */}
<Grid item>
<Typography className={classes.h5} variant="h5">Latest
Projects</Typography>
</Grid>
<Grid item xs={12} sm={6} component={projectList} />
<Grid item className={classes.nextButton}>
<Button
className={classes.contained}
size="medium"
variant="contained"
onClick={this.handleShowMore}
>
See More
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs />
</Grid>
)
}
}
export default withStyles(styles)(Projects)
I have this error message appearing
index.js:1452 Warning: Failed prop type: The prop classes is marked as required in projectList, but its value is undefined.
Anyone could help me fix this ?

Not sure where that <Grid/> component comes from but you could pass an inline wrapper for projectLists and return it as a jsx element (you would need a capital first letter though):
<Grid item xs={12} sm={6} component={() => <ProjectList classes={classes} />} />
Don't forget to change the decleration to capital letter:
function ProjectList(props) {
...