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?

It's really not connected to anything, I got confused and cancelled it, I'll update it — , Mar 21 '21 at 22:01

score 1 · Accepted Answer · answered Mar 21 '21 at 22:17

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>
  );
}

answered Mar 21 '21 at 22:17

Girgetto

1,010
9
19

How about in a class component? – Mar 21 '21 at 22:54
1

@PiersalvoMigliore https://codesandbox.io/s/musing-tharp-xrrth?file=/src/App.js:0-934 – Girgetto Mar 22 '21 at 08:52
It gives me an error: `undefined is not an object (evaluating 'data.parsed.map')` – Mar 22 '21 at 14:04
What's retrieved from the API call? @PiersalvoMigliore – Girgetto Mar 22 '21 at 14:15
It should be the label of the food (chicken, rice etc...) – Mar 22 '21 at 14:35
@PiersalvoMigliore the response will depend on which API call are you making. You can see it in API documentation or you can do a `console.log(res)` – Girgetto Mar 22 '21 at 14:48

Database API in SearchBar

1 Answers1