How to populate select options from an Api call in React js on page load-CodePudding

I'm trying to populate my select dropdown options with values that come from an API call as soon as the page loads. Currently, the options are only generated once you touch and deselect the select field. On page load, the options do not get filled and are empty. I've looked at other similar questions that suggest using the React-select package, but I'm looking for a way to do it with just react and I haven't had any luck finding a solution. Please advise on how I can achieve this or where I can get help. I've attached my code below. Kind regards.

import { Form } from "react-bootstrap";
import { Field, ErrorMessage } from "formik";
import axios from "axios";

function CompanySelect(props) {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    const opt = [
      {
        key: "Select a company",
        value: "",
      },
    ];

    (async () => {
      const { data } = await axios.get("http://localhost:5000/api/company/");
      data.forEach((value) => {
        opt.push({
          key: value.name,
          value: value.id,
        });
      });
    })();

    setOptions(opt);
  }, []);

  const { label, name, ...rest } = props;

  return (
    <Form.Group className="mb-2">
      <Form.Label htmlFor={name}>{label}</Form.Label>
      <Field id={name} name={name} {...rest} as={Form.Select}>
        {options.map((option) => {
          return (
            <option key={option.value} value={option.value}>
              {option.key}
            </option>
          );
        })}
      </Field>
      <ErrorMessage className="text-danger" name={name} component={Form.Text} />
    </Form.Group>
  );
}

export default CompanySelect;

CodePudding user response：

You are updating your state at the wrong time, just after triggering the async axios.get but before the results actually come in. So when the state update actually occurs, opt doesn't contain the data fetched from axios yet. Here is the fixed version:

import { Form } from "react-bootstrap";
import { Field, ErrorMessage } from "formik";
import axios from "axios";

function CompanySelect(props) {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    async function fetchData() {
      // Fetch data
      const { data } = await axios.get("http://localhost:5000/api/company/");
      const results = []
      // Store results in the results array
      data.forEach((value) => {
        results.push({
          key: value.name,
          value: value.id,
        });
      });
      // Update the options state
      setOptions([
        {key: 'Select a company', value: ''}, 
        ...results
      ])
    }

    // Trigger the fetch
    fetchData();
  }, []);

  const { label, name, ...rest } = props;

  return (
    <Form.Group className="mb-2">
      <Form.Label htmlFor={name}>{label}</Form.Label>
      <Field id={name} name={name} {...rest} as={Form.Select}>
        {options.map((option) => {
          return (
            <option key={option.value} value={option.value}>
              {option.key}
            </option>
          );
        })}
      </Field>
      <ErrorMessage className="text-danger" name={name} component={Form.Text} />
    </Form.Group>
  );
}

export default CompanySelect;