Database API in SearchBar

Question

        <SearchBar/>
            <List style={{ paddingTop: hp("1%"), backgroundColor: "white" }}>
              <TouchableOpacity>
                <Text>Foods</Text>
              </TouchableOpacity>
            </List>

Hey everyone, I can't figure out the following: I am trying to search foods from the database Edamam API by the SearchBar and list them in the List, this is the link of the page: https://developer.edamam.com/food-database-api-docs how can I do this?

Answer 1

Here an example with a search by ingredient:

export default function App() {
  const [data, setData] = useState([]);

  const updateSearch = (e) => {
    axios
      .get(
        `https://api.edamam.com/api/food-database/v2/nutrients?app_id=${YOUR_APP_ID}&app_key=${YOUR_APP_KEY}&ingr=${e.target.value}`
      )
      .then((res) => {
        setData(res.data);
      });
  };

  return (
    <div className="App">
      <SearchBar onChange={updateSearch}>
        <List style={{ paddingTop: hp("1%"), backgroundColor: "white" }}>
          <TouchableOpacity>
            <Text>
              {data.parsed.map(({ food }) => (
                <p>{food.label}</p>
              ))}
            </Text>
          </TouchableOpacity>
        </List>
      </SearchBar>
    </div>
  );
}