How to pass a function via onChange to a nested Material UI component

[aadlc]

Hello,

I am have a Material UI nested component that look as follow:

imports . . . 

const TxtInput = ({ name, value, label, required }) => {
  const { control, ...rest } = useFormContext()
  return (
    <Controller
      name={name}
      defaultValue={value}
      control={control}
      render={({
        field: { onChange, onBlur, value, name, ref }
      }) =>
        <TextField
          required={required}
          fullWidth
          label={label}
          id={name}
          inputProps={{ 'aria-label': label }}
          onBlur={onBlur}
          onChange={onChange}
          checked={value}
          inputRef={ref}
          {...rest}
        />}
    />
  )
}

export default TxtInput

While in my app.js, <TxtInput /> look like this:

<FormProvider {...methods}>
    <form onSubmit={handleSubmit(submit)}>
        <TxtInput
        name='fullName'
        label='First and last name'
        required
        value=''
        onChange={() => console.log('hello')}
    </form>
</FormProvider>

And I am expecting to see 'Hello' with every keystroke in my console but, that is not the case.

Does anyone know why?

[thanh-nguyen-95]

Your TextInput does not receive onChange props. If you want to pass in a custom onChange, try this:

function TxtInput({ onChange: yourOnChange /* other props here */ }) {
  return (
    /* rest of the code */
    <Controller
      render={({ field: { onChange: rhfOnChange } }) => (
        <TextField
          required={required}
          fullWidth
          label={label}
          id={name}
          inputProps={{ 'aria-label': label }}
          onBlur={onBlur}
          onChange={(ev) => {
            const { target: { value }} = ev
            
            rhfOnChange(value)
            yourOnChange(value)
          }}
          checked={value}
          inputRef={ref}
          {...rest}
        />
      )}      
    />
  )
}

[bluebill1049]

thank you @thanh-nguyen-95

[aadlc]

Thank you @thanh-nguyen-95 and my apologies for the delayed reply.

If don't mind, could you explain the difference between your code above and the approach below?

const TxtInput = ({ onChange /* other props here */ }) => { 
 /* rest of the code */
  return (
    <Controller
      name={name}
      defaultValue={value}
      control={control}
      render={({
        field: { onBlur, value, name, ref } 
      }) =>
        <TextField
          required={required}
          fullWidth
          label={label}
          id={name}
          inputProps={{ 'aria-label': label }}
          onBlur={onBlur}
          onChange={onChange}
          checked={value}
          inputRef={ref}
          {...rest}
        />}
    />
  )
}

Your solution seems more robust but, unfortunately, I don't understand everything you are doing and the reason behind it.

[thanh-nguyen-95]

Thank you @thanh-nguyen-95 and my apologies for the delayed reply.

If don't mind, could you explain the difference between your code above and the approach below?

const TxtInput = ({ onChange /* other props here */ }) => { 
 /* rest of the code */
  return (
    <Controller
      name={name}
      defaultValue={value}
      control={control}
      render={({
        field: { onBlur, value, name, ref } 
      }) =>
        <TextField
          required={required}
          fullWidth
          label={label}
          id={name}
          inputProps={{ 'aria-label': label }}
          onBlur={onBlur}
          onChange={onChange}
          checked={value}
          inputRef={ref}
          {...rest}
        />}
    />
  )
}

Your solution seems more robust but, unfortunately, I don't understand everything you are doing and the reason behind it.

I have no idea how much you know about react-hook-form or react in general so if there's still something you don't understand after reading my explanation, feel free to ask.

To have it easier to understand, I'm going to call the onChange prop passed into <TxtInput /> as yourOnChange and the onChange from <Controller /> as rhfOnChange (rhf stands for react-hook-form).

The key difference between my solution and yours is the onChange handler inside <TextField />.

In your case, you want yourOnChange function to be invoked when the input changes, which will work with the code you provided above.

However, you're missing one important thing: updating the form data. If you only pass in yourOnChange and not rhfOnChange, the data will not be updated, which results in stale data when you submit the form.

My solution is to create a wrapper function, which calls both yourOnChange and rhfOnChange with the new value. That way, you can have the form data updated (most important part in my opinion) and still have a custom behaviour from yourOnChange (logs the new value in your case).

[aadlc]

Excellent point regarding stale data!
Thank you very much!!!!

[Mendoza920]

Still new at this.

…

On Wednesday, May 12, 2021, Thanh Nguyen ***@***.***> wrote: Your TextInput does not receive onChange props. If you want to pass in a custom onChange, try this: function TxtInput({ onChange: yourOnChange /* other props here */ }) { return ( /* rest of the code */ <Controller render={({ field: { onChange: rhfOnChange } }) => ( <TextField required={required} fullWidth label={label} id={name} inputProps={{ 'aria-label': label }} onBlur={onBlur} onChange={(ev) => { const { target: { value }} = ev rhfOnChange(value) yourOnChange(value) }} checked={value} inputRef={ref} {...rest} /> )} /> )} — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#5178 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARXQ5YRULR2T65FGEUPAMOTTNNVYHANCNFSM44ZKANWQ> .