next js state change doesnt change value of input

user_6255619 0
Viewed 450

I have this piece of code but that does not change value of input field when state changes.State changes when user clicks on a row. State is changing as i printed the value outside text field but that does not reflect in input field. I tried with value instead of defaultValue but it doesnt work.

                           <Controller
                            name="name"
                            control={control}
                            defaultValue={selectedRow.name}
                            value={selectedRow.name}
                            rules={{
                              required: true,
                            }}
                            render={({ field }) => (
                              <TextField
                                variant="outlined"
                                fullWidth
                                id="name"
                                label="Name"
                                error={Boolean(errors.name)}
                                helperText={
                                  errors.name ? 'Name is required' : ''
                                }
                                {...field}
                              ></TextField>
                            )}
                          ></Controller>
next.js reactjs input
1 Answers

It looks like you use react-hook-from (https://react-hook-form.com/).

value and onChange should be inside of TextField like this.

<Controller
  name="name"
  control={control}
  rules={{
    required: true,
  }}
  render={({ field, value, onChange }) => (
    <TextField
      value={value}
      onChange={onChange}
      variant="outlined"
      fullWidth
      id="name"
      label="Name"
      error={Boolean(errors.name)}
      helperText={
        errors.name ? 'Name is required' : ''
      }
      {...field}>
    </TextField>
  )}
/>
user_68614150
Related