Consuming data

consuming.jsx

function fetchLedBrands = async () => {
  // This can be sourced from anything, an api endpoint etc.
  //[
  //  { id: 1, label: "a" },
  //  { id: 2, label: "b" },
  //  { id: 3, label: "c" },
  //  { id: 4, label: "d" },
  //  { id: 5, label: "e" },
  //];
  
  const ledBrands = await fetch("...");
  
  return ledBrands;
};

function fetchDesignSpecs = async () => {
  // [
  //   { id: 1, ledBrand: { id: 2, label: "b" } }.
  //   { id: 2, ledBrand: { id: 3, label: "c" } }.
  //   { id: 3, ledBrand: { id: 2, label: "b" } }.
  // ]
  
  const designSpecs = await fetch("...");
  
  return designSpecs;
}

const App = () => {
  const [brands, setBrands] = useState(() => []);
  const [specs, setSpecs] = useState(() => []);
  
  useEffect(async () => {
    const b = await fetchLedBrands();
    setBrands(b);
  }, []);
  
  useEffect(async () => {
    const s = await fetchDesignSpecs();
    setSpecs(s);
  }, []);
  
  return (
    <>
      // Do something with your specs here
      <select>
        {brands.map(({ id, label }) => (
          <option key={id} value={id}>{label}</option>
        )}
      </select>
    </>
  );
};