ReactJS passing input data from child to parent - reactjs

Question

Good day. I'm having trouble figuring out how to pass input data from Child component to parent.
P.S
If there is a more appropriate way in managng the components data, i'm free to opened suggestions.
The Child
class CustomEmailInput extends React.Component {
constructor(props){
super(props);
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<CssTextField
className={classes.margin}
required
fullWidth
autoComplete="email"
onChange={this.props.setMail}
InputProps={{
className: classes.input
}}
InputLabelProps={{
className: classes.labelInput
}}
label="Email"/>
</div>
);
}
}
export default withStyles(useStyles)(CustomEmailInput);
The Parent
class SignIn extends React.Component {
constructor(props){
super(props);
this.state = {
email: '',
password: '',
};
this.handleData = this.handleData.bind(this);
this.setEmail = this.setEmail.bind(this);
}
handleData = props => {
const { email, password } = this.state;
console.log(email, password)
};
setEmail = (data) => {
this.setState({
email: data
});
console.log(data)
};
render() {
const { classes } = this.props;
return (
<div className={classes.bg}>
<Container component="main" maxWidth="xs" pt={5}>
<CssBaseline/>
<div className={classes.paper}>
<Typography
component="h1"
variant="h5"
style={{color: 'white'}}
>
Sign in
</Typography>
<form className={classes.form}>
<MyEmailField
setMail={this.setEmail}
/>
<MyPasswordField
// setPassword={this.setPassword}
label="Password"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="default"
className={classes.submit}
onClick={this.handleData}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link
to="/reset"
variant="body1"
className={classes.btn_forgot}
style={{textDecoration: 'none'}}
>
Forgot password?
</Link>
</Grid>
<Grid item>
<Link
to="/register"
variant="body2"
className={classes .btn_register}
style={{textDecoration: 'none'}}
>
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
</Container>
</div>
);
}
}
export default withStyles(useStyles)(SignIn);
I'm using material-UI, would it be better to change the child component to functional component?

Answer 1

The practice, which I can see you are using in this code, is setting the state of the parent by passing to the children a function that triggers setState (You're doing it with setEmail) and then call that function in child component to update parent's state.
(Another ways includes using mobx or redux)

Answer 2

first off all you should try the Redux pattern for your application, this way communication between components is not more up to the component itself. You will have an architecture dealing with this.
Dealing with your problem, a solution is to create a function in your parent that receives the input as parameter and pass it by props to the child, then you just have to call it inside the child at some event (onChange like you are doing).