0

In a React project, I have an Autocomplete component which has country name and its relevant calling codes displayed in drop-down list. When selected on list renders the desired data, but, when refreshed, data is null and doesn't show the default data.

const [newValue, setNewValue] = useState({});
const [textToggle, textToggleState] = useState(false);

render(
        <div
          style={{ cursor: "pointer" }}
          onClick={() => {
            textToggleState(!textToggle);
          }}
        >
          <h5>+{newValue == null ? "91" : newValue.calling_code}</h5> {/* <-- Value gets null when refreshed */}

        </div>
        {textToggle ? (
          <Autocomplete
            id="size-small-standard"
            size="small"
            options={cities}
            onChange={(event, value) => {
              setNewValue(value);
              textToggleState(!textToggle);
            }}
            autoSelect={true}
            getOptionLabel={(option) =>
              `${option.country}` + `+ ${option.calling_code}`
            }
            renderOption={(option) => (
              <>{`${option.country} + ${option.calling_code}`}</>
            )}
            //defaultValue={cities[98]}
            style={{ width: "100%" }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder="Search your country"
                style={{ width: "40%" }}
              />
            )}
          />
        ) : (
          ""
    )}
)

Following is the CodeSandbox link: https://codesandbox.io/s/how-to-add-only-single-value-from-autocomplete-in-material-ui-forked-tu218

2
  • 1
    Looks like the value is not null but the empty object {} by default. Try making it null by default instead, e.g. useState(null) instead of useState({}). Apr 11, 2021 at 8:31
  • How to make it null by default
    – Pranav
    Apr 11, 2021 at 8:34

1 Answer 1

3

You can pass a value prop to autocomplete component with the newValue. But newValue is an empty object by default that doesn't exist in the options array you are passing to the autocomplete so it will show undefined + undefined in the default case. You can make that null and add null check there in the autocomplete itself or you can assign a value directly in your useState So as you are having a check for null and using 91 code so instead you can assign that value to the newValue itself directly. Check the code below I have added the value field here

        <Autocomplete
            id="size-small-standard"
            size="small"
            options={cities}
            value={newValue !== null ? newValue : cities[98]}
            onChange={(event, value) => {
              setNewValue(value);
              textToggleState(!textToggle);
            }}
            autoSelect={true}
            getOptionLabel={(option) =>
              `${option.country}` + `+ ${option.calling_code}`
            }
            renderOption={(option) => (
              <>{`${option.country} + ${option.calling_code}`}</>
            )}
            //defaultValue={cities[98]}
            style={{ width: "100%" }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder="Search your country"
                style={{ width: "40%" }}
              />
            )}
          />

Or you can just pass newValue to the value field and assign the default value in the newValue useState as shown below

const [newValue, setNewValue] = useState(cities[98]);
.
.
.
.
<Autocomplete
            id="size-small-standard"
            size="small"
            options={cities}
            value={newValue}
            onChange={(event, value) => {
              setNewValue(value);
              textToggleState(!textToggle);
            }}
            autoSelect={true}
            getOptionLabel={(option) =>
              `${option.country}` + `+ ${option.calling_code}`
            }
            renderOption={(option) => (
              <>{`${option.country} + ${option.calling_code}`}</>
            )}
            //defaultValue={cities[98]}
            style={{ width: "100%" }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder="Search your country"
                style={{ width: "40%" }}
              />
            )}
          />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.