React hook form isn't displaying objects in the console onsubmit - forms

Question

I am trying to use react-hook-form to simply generate some data from two material UI text fields and display the data in the console, but the when clicking the submit button I cannot see anything in the console.log, this is the code:
import React from 'react';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles';
import { useForm } from 'react-hook-form';
const useStyles = makeStyles({
container: {
margin: '1rem',
'& .MuiTextField-root': {
margin: '1rem 0',
},
},
});
const GuestJoiningForm = () => {
const { register, handleSubmit } = useForm()
const onSubmit = (data) => {
console.log(data);
};
const classes = useStyles();
return (
<form onSubmit={handleSubmit(onSubmit)} className={classes.container}>
<TextField
ref={register}
label="Name"
name="name"
variant="outlined"
fullWidth/>
<TextField
ref={register}
multiline rows={3}
label="Content"
name="content"
variant="outlined"
fullWidth/>
<Button
color="primary"
variant="contained">Submit</Button>
</form>
)
};
export default GuestJoiningForm;
When I enter data into the text fields and hit the submit button, nothing happens and I would expect to see an object of the data I enter. I don't imagine its the console I'm using, but it's in Safari and the only thing I've noticed is something that says [HMR] Waiting for update signal from WDS...
Not sure if that has anything to do with it, but would really appreciate any help on this issue if you get time, thank you.
Last thing to add! I added a type={'submit'} to the button, and the console responded with empty {}, which even though didn't fix the issue I guess proves that the console is working

Answer 1

You need to add type attribute as submit in the Submit button.
<Button type="submit" color="primary" variant="contained">
Submit
</Button>;
You need to add inputRef prop for both the TextField components like this
<TextField
ref={register}
inputRef={register}
label="Name"
name="name"
variant="outlined"
fullWidth
/>
<TextField
ref={register}
multiline
rows={3}
inputRef={register}
label="Content"
name="content"
variant="outlined"
fullWidth
/>
Here's a sandbox for your form.