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
2. Rendering the API results was too much and started filling up the screen.

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.