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.
- Some images were not showing up
- 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.
