React view state of Select box

Question

I have a class, lets call Customer...

export default function Customer({ customerId }: Props) {
    
  const [providerId, setProviderId] = useState("");

}

It contains a component imported from another class, which itself is a Select box.

         <InputProvider
             id="idProviderId"
             selectedVal={providerId}
             onProviderChange={providerUpdate} />

The InputProvider class looks as follows:

interface Props {
  id: string;
  selectedVal: string;
  //onProviderChange: (providerId: string) => void;
  
  onProviderChange?: ((value: any, action: ActionMeta<any>) => void)
}

export default function InputProvider({id, onProviderChange, selectedVal}: Props) {
    //const [customerSaleTypeList, setCustomerSaleTypeList] = useState(new CustomerSaleTypeListDto());

    const { data: ListOfCustomerTradeProviders } = useQuery("CustomerTradeProviders", () => getListofCustomerTradeProviders());
    //alert(getListofCustomerSaleTypes());

    const [value, setValue] = useState()
  return (
    <InputSelect
      name="providerId"
      label="Provider"
      instanceId={id}
      onChange={onProviderChange}
      options={ListOfCustomerTradeProviders || []}
    />
  );
}

What I want to be able to do is pass in my onChange function, and from there work out the selected value. I am passing in "onProviderChange", in the props I'm really not sure what to set, I've tried a variety of things.

Then back in my Customer class, here's what providerUpdate() looks like:

  function providerUpdate(e: any) {
    alert(String(e.target.value));
    setProviderId(e.target.value); // this line generates the error: TypeError: Cannot read properties of undefined (reading 'value')
    //alert("Changing...");
  }

InputSelect is as follows, this is a snippet:

export default function InputSelect({
  label, name, options, placeholder, message, isClearable, canAddItems, instanceId, onChange,
}: Props) {
  const [field, meta, helpers] = useField(name || label || "unknownfield");

  const { error } = meta;
  const { setValue } = helpers;

  function getOptionValue() {
    // Select value needs to be the object in the options list not the field value
    let foundOption = options.find((item) => item.value === field.value);

    if (foundOption) { return foundOption; }

    if (canAddItems && field.value) {
      // Add the custom value that the user entered so it shows in the control
      foundOption = { value: field.value, label: field.value };
      options.push(foundOption);
    } else {
      // Can't add items or value is empty string/null
      return null;
    }

    return foundOption;
  }

  function handleOnChange(option: InputSelectItem, actionMeta: ActionMeta<any>) {
    setValue(option?.value);
    if (onChange) { onChange(option, actionMeta); }
  }

  return (
    <>
      <Form.Group controlId={name || label}>
        <Form.Label>{label || name}</Form.Label>
        {canAddItems ? (
          <CreatableSelect
            name={field.name}
            options={options}
            value={getOptionValue()}
            isClearable={isClearable}
            placeholder={placeholder || label}
            onChange={handleOnChange}
            onBlur={field.onBlur}
            instanceId={instanceId}
            theme={selectTheme}
            styles={selectStyle}
          />
        )
          : (
            <Select
              name={field.name}
              options={options}
              value={getOptionValue()}
              isClearable={isClearable}
              placeholder={placeholder || label}
              onChange={handleOnChange}
              onBlur={field.onBlur}
              instanceId={instanceId}
              theme={selectTheme}
              styles={selectStyle}
            />
          )}
        {(message && !error) && (
          <Form.Text>{message}</Form.Text>
        )}
        {error && (
          <Form.Text className="text-error">{error}</Form.Text>
        )}

      </Form.Group>
    </>
  );
}

InputSelect.defaultProps = defaultProps;

Where to from here? This seems like such a simple task and I can't work it out.

Syed Aman Ali · Answer 1 · 2023-01-30T14:38:24.290

0

onProviderChange?: ((value: any, action: ActionMeta<any>) => void)

from this, it is clear that onProvidChange need to have two parameter so providerUpdate function declaration will be like this

function providerUpdate(value:any , _) {
    alert(String(value));
    setProviderId(value);
  }

try this, if it helps do an upvote

edited Jan 30 '23 at 14:38

answered Jan 30 '23 at 07:34

Syed Aman Ali

151
5

but you declared it with 1 parameter? The only difference I see is that you referenced value rather than val.target.value ? – Sami.C Jan 30 '23 at 07:42
I thought that function directly received the value instead of the event object. or simply just log the parameter you will get to know. if it is a select tag one can get the value using e.value instead of e.target.value [link](https://stackoverflow.com/questions/5416767/get-selected-value-text-from-select-on-change) refer this – Syed Aman Ali Jan 30 '23 at 14:44

React view state of Select box

1 Answers1