Setting a default value for a select when select is based on API call

Question

I have a function component that takes a list from props and renders a simple select:

<AccountForm onSubmit={onAccountSave} countryList={countryList} account={account}></AccountForm>

In the compnent i render the select:

<select ref={register} className="form-control" name="countryId" disabled={!accountEditMode} >
{props.countryList.map((country, index) => (
    <option key={country.id} value={country.country}>{country.country}</option>
))}
</select>

The countryList comes from an async call in the main component. I also gets the selected value from a prop. The default value is however not set, properly because I set the default value, before the select has been loaded. How do you handle a scenario like this? Is there an event or something I wait for before setting the value, or what is the right approach here?

Don't render <AccountForm /> until you have a real data. For example {!isLoading && <AccountForm ...props /> — Mosh Feu
– Mosh Feu, Commented May 20, 2020 at 12:03
@MoshFeu but wont you still have the same problem? I get my values async. Both the country list and the selected id. Then I start filling the select while setting the default value. Wont that override the default value as the select maybe has not been filled yet? — Thomas Segato
– Thomas Segato, Commented May 20, 2020 at 12:35
If I understand correctly, <AccountForm/> will be rendered only after the data fetched, so you don't have that problem. You'll pass the data and the selected value at once synchronically. BTW, I can't see in your code where you set the default value from the prop. — Mosh Feu
– Mosh Feu, Commented May 20, 2020 at 12:48
@MoshFeu I just tested it and it works perfectly. Thanks! Can you create an answer. — Thomas Segato
– Thomas Segato, Commented May 20, 2020 at 12:49

Mosh Feu · Accepted Answer · 2020-05-20 13:02:55Z

1

You can render <AccountForm /> only after the data been received so it won't have to deal with empty state.

Something like this (This is a "pseudo" implementation)

function Component() {
  const [countryList, setCountryList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchCountryList()
      .then(data => {
        setCountryList(data);
        setIsLoading(false)
      });
  }, []);

  return (
    <>
    {!isLoading &&
      <AccountForm onSubmit={onAccountSave} countryList={countryList} account={account}></AccountForm>
    }
  )
}

Or you can check directly if countryList is empty, like this:

{!countryList.length &&
  <AccountForm onSubmit={onAccountSave} countryList={countryList} account={account}></AccountForm>
}

(And there are more options)

answered May 20, 2020 at 13:02

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milos · Accepted Answer · 2020-05-20 12:03:09Z

0

Have you tried setting the value in the state, and then update the state in the async call? And setting that state value in option value? Just brainstorming.

answered May 20, 2020 at 12:03

Milos

7193 gold badges10 silver badges24 bronze badges

3 Comments

Mosh Feu Over a year ago

Well, brainstorm is not an answer :) I know that you can't comment but you shouldn't commend in an answer..

Thomas Segato Over a year ago

So what you mean is have a hook. Set that as defaultValue. And update it. I will try.

Milos Over a year ago

@MoshFeu I know it's not by the rules, but I just wanted to help :) Yes, Thomas, that's the idea. Hope it helps :)

Collectives™ on Stack Overflow

Setting a default value for a select when select is based on API call

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related