0

I am using ReactJS Autocomplete , where I get options from API . This seems working fine . Then I save data to DB using react-hook-form . On page load I get data using API and using SetValues I populate the form. But AutoComplete textInput don't show the value I received from API.

<Controller
                render={(props, field) => (
                  <Autocomplete
                    // id="asynchronous-demo"
                    {...props}
                    open={open}
                    onOpen={() => {
                      setOpen(true)
                    }}
                    onClose={() => {
                      setOpen(false)
                    }}
                    filterOptions={(x) => x}
                    isOptionEqualToValue={(option, value) => { 
                      setValue('city', option.city)
                      setValue('state', option.state)
                      return true
                    }}
                    getOptionLabel={
                      (option) => option.zipCode 
                    }
                    renderOption={(props, option, { selected }) => (
                      <li {...props}>
                        {option.zipCode} City: {option.city} State:{' '}
                        {option.state}
                      </li>
                    )}
                    options={options}
                    loading={loading}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        // value={getValues('zipCode')}  // tried, but didn't worked
                        onKeyUp={(ev) => {
                          // dont fire API if the user delete or not entered anything
                          if (
                            ev.target.value !== '' ||
                            ev.target.value !== null
                          ) {
                            onChangeHandle(ev.target.value)
                          }
                        }}
                         
                      />
                    )}
                  />
                )}
                onChange={([, data]) => data} 
                defaultValue=getValues('zipCode') // tried, but didn't worked
                /* defaultValue={ // tried, but didn't worked
                  fetchedData
                    ? {
                        zipCode: getValues('zipCode'),
                        id: '',
                        city: '',
                        state: '',
                      }
                    : ''
                } */
                name="zipCode"
                control={control}
              />

I have used defaultValues using object , using single value . and in textInput values also . But nothing worked for me.

I populate the options using below handler.

const onChangeHandle = async (value) => { 
    axios
      .get(
        `${process.env.REACT_APP_API_URL}/Settings/Searchcitystate?zipcode=${value}`,
        { headers }
      )
      .then((response) => {
        // console.log('response.data: ', response.data)

        const countries = response.data
        setOptions(countries)
      })
      .catch((error) => {
        console.error('There was an error!', error)
      })
  }
asif_ali0869
  • 81
  • 13
  • The data you are getting is in the form of single string or object like {id: "id", label: "label"} – Usama Apr 15 '22 at 07:45
  • object {zipcode:'',city:'',state:''}. Change handler is working fine and setting data in autocomplete. But on form load , I don't want to trigger change handler. I want textinput to show value that I received from API , and as form's other fields are showing. – asif_ali0869 Apr 15 '22 at 07:50
  • Use value instead of defaultValue. Then try to hardcode the value and refresh the page to check if value remains. value = {zipcode:'900',city:'test',state:'state'} – Usama Apr 15 '22 at 08:26

0 Answers0