React: How To Get Values From Material-ui Textfield Components

I have a small app with a Form component, a SubmitButton component, and my parent (App.js) component. When the user clicks the submit button I want to get the values of the 3 field

Solution 1:

If you don't want to move your components you can take the state handler out of infoForm.js

move this code to app.js and change the handler name to "handleChangeForm" (optional name)

const [values, setValues] = React.useState({
    name: '',
    email: '',
    months: ''
  });

  const handleChangeForm = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

then you can use the handler and the values in infoForm as properties like this:

<Formvalues={values}handleChangeForm={handleChangeForm}/>

also you need to send to your button component the values as properties

Inside form component you should destructure the props like this:

const { values, handleChangeForm } = props;

  return (
    <formnoValidateautoComplete="off"> .....

onChange event example inside form

onChange={handleChangeForm("name")}

Finally you have the values connected to your buttom component and you can use a function like this

constonClickBtn = () => {
    console.log(props.values);
  };

when button is clicked

<Buttonvariant="contained"color="primary"disabled={!props.isEnabled}type="submit"onClick={onClickBtn}
      >
        Submit
      </Button>