How to set the first option of the select as default value

Question

I would like to set the selectedSubscriber value with first item from subscriberOptions array (subscriberOptions[0].value). What is the best way to do it?

const defaultFormInput = {
  subscriberOptions: [],
  selectedSubscriber: "",
  subscriberOptionsIsLoading: true,
};

const [formInput, setFormInput] = useState(defaultFormInput);

useEffect(() => {
    //load subscribers from API
    async function loadSubscribers() {
      const response = await fetch("https://myapi/subscribers");
      const body = await response.json();
      setFormInput({
        ...formInput,
        subscriberOptions: body.map((x) => ({ value: x.id, name: x.name })),
        subscriberOptionsIsLoading: false,
      });
      // not working
      //setFormInput({
      //  ...formInput,
      //  selectedSubscriber: formInput.subscriberOptions[0].value,
      //});
    }

    loadSubscribers();
}, []);

JSX

<Select
  disabled={formInput.subscriberOptionsIsLoading}
  value={formInput.selectedSubscriber}
  name="selectedSubscriber"
  onChange={handleChange}
>
  {formInput.subscriberOptions &&
    formInput.subscriberOptions.map((item) => {
      return (
        <MenuItem key={item.value} value={item.name}>
          {item.name}
        </MenuItem>
      );
    })}
</Select>

Answer 1

you need to map your data and set at the same state, it should work.

const defaultFormInput = {
      subscriberOptions: [],
      selectedSubscriber: "",
      subscriberOptionsIsLoading: true,
    };
    
    const [formInput, setFormInput] = useState(defaultFormInput);
    
    useEffect(() => {
        //load subscribers from API
        async function loadSubscribers() {
          const response = await fetch("https://myapi/subscribers");
          const body = await response.json();
          const mappedData = (body || []).map((x) => ({ value: x.id, name: x.name }));
          const [defaultSelect] = mappedData || [];
          setFormInput({
            ...formInput,
            subscriberOptions: mappedData,
            selectedSubscriber: defaultSelect.value,
            subscriberOptionsIsLoading: false,
          });
        }
    
        loadSubscribers();
    }, []);