map not a function using react hooks

Question

i'm trying to populate a select bar with a name from an API call. I Have created my hook, also useEffect for its side effects, and passed the data down the return. its giving me map is not a function error. my variable is an empty array but the setter of the variable is not assigning the value to my variable. How can i clear the map not a function error ? i have attached my snippet. Thanks.

import React, { useEffect, useState } from "react";
import axios from "axios";

const Sidebar = () => {
  const [ingredients, setIngredients] = useState([]);

  useEffect(() => {
    const fetchIngredients = async (url) => {
      try {
        let res = await axios.get(url);
        setIngredients(res.data);
      } catch (error) {
        setIngredients([]);
        console.log(error);
      }
    };
    fetchIngredients(
      "https://www.thecocktaildb.com/api/json/v2/1/search.php?i=vodka"
    );
  }, []);


  const displayIngredients = ingredients.map((ingredient) => {
    setIngredients(ingredient.name);
    return <option key={ingredient.name}>{ingredients}</option>;
  });

  return (
    <div className="sidebar">
      <label>
        By ingredient:
        <select>{displayIngredients}</select>
      </label>
    </div>
  );
};

export default Sidebar

Answer 1

First, here

setIngredients(res.data);

change res.data to res.ingredients (the response object doesn't have data property). Then you'll face another bug,

const displayIngredients = ingredients.map((ingredient) => {
    setIngredients(ingredient.name);
//...

First, ingredient.name is undefined, and second, it probably would be a string if it existed. Just ditch the setIngredients call here.

Answer 2

You are declaring displayIngredients as a variable typeof array (By directly affecting the array.map() result). You need it to be a function that return an array as follow :

const displayIngredients = () => ingredients.map((ingredient) => {
    // Do not erase your previous values here
    setIngredients(previousState => [...previousState, ingredient.name]);
    // Changed it here as well, seems more logic to me
    return <option key={ingredient.name}>{ingredient.name}</option>; 
  });

You should also wait for the API call to end before to display your select to prevent a blank result while your data load (If there is a lot). The easiest way to do that is returning a loader while the API call is running :

if(!ingredients.length) {
 return <Loader />; // Or whatever you want
}

return (
    <div className="sidebar">
      <label>
        By ingredient:
        <select>{displayIngredients}</select>
      </label>
    </div>
  );