Add limit to the Api search

During my recent project, My Bowl, I came across a few issues when rendering the API to the screen. I used a third-party API from Edamam which allows me to look up food nutrition info. The API renders images, protein, carbs, fat, and more. I used this API to further assist users when it comes to looking up food information, tracking macros, and building a better healthy lifestyle.

The Problem

As I tested out the functionality of my search bar I came across a few issues that were showing up in the API.

  1. Some images were not showing up

Solving the issue.

I solved the first issue by providing a conditional rendering technique that puts a dummy image in place if there were no images to be found in the API.

I solved the second issue by creating a react hook state, which has a set state of 5 here's a brief example below.

const [limit, setLimit] = useState(8)

Once that was established now it’s time to get into the nitty-gritty, The API. I started by slicing through the array and added a shorthand conditional from 0 to my current state limit in the react hooks. If it evaluates to true I will map through the array and display the limits of the content that I am iterating through. Here is a brief example below.

foodAPI.slice(0, limit ? limit : foodAPI.length).map((result) => (// render information here))

I was able to solve the issue through this method. Thanks for reading.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store