Dinos | platform Web-based Desktop Environment

The renderMultipleCards is issuing a side-effect of fetching data during the render cycle, and then updating state. This causes render looping.

You likely only need to fetch the data once when the component mounts. Use a mounting useEffect hook (i.e. empty dependency) to accomplish this. Remove the getData(apiUrl) call from renderMultipleCards.

Remove all of the unneccessary JSON parsing and stringifying:

You can filter based on the names of the products:

facts does not exists so when you set fact = facts[something]

fact is undefined

In my full solution further down, I wrote two prototype functions that return a certain number of elements/properties (defaults to return 1 element/property) at random and return those value(s). For this TL;DR version of the solution, you only need the array function I wrote.

This should do what you are looking for:

but it seems to be that the empty space between the panels is being divided up between them

Correct. A BoxLayout will attempt to allocate extra space to all components.

However, it will respect the maximum size of each panel.

So to prevent the panels height from growing you can use code like:

np.array([-1, -1, -1]) == [-1, -1, -1] evaluates to [True, True, True] as numpy compares them index by index

you'd probably want if not all(field[x,y,z] == [-1,-1,-1])

Once the td sorted... You just have to loop throught it and append it's parent tr in the table...

You seem rather confused on what this class is supposed to represent.

Your class has both a name and weight field, so, apparently, a DinoDatabase instance represents a single dinosaur. Yet, it also has a map that maps names to weights, so, it also represents the concept of a dino database.

That doesn't make sense.

You should probably have two classes here: public class Dino {String name; int weight; } and public class DinoDatabase { Map dinos; }. Smushed together, that makes no sense and is confusing you a lot. For example, in your constructor, you write this.name = name; which does nothing whatsoever, it's assigning the name field to itself. It only makes sense if there is a parameter named name. You could get away with making no Dino class at all and sticking with a Map for your dinos, but it does mean you're committed to only storing the weight of dinos and you can't conveniently add more properties, such as which era they were alive in, or whether they could fly or not.

Given that you're using a hashmap, there is no DB smarts you can apply here; the only way to find all dinos that match a certain condition, unless the condition is: "Whose name is exactly equal to this string", is to loop through the entire map and return all matching entries. Actual DBs are smarter, in that you can add an index so that such queries can be fast even if you have millions of dinos, but that involves programming concepts that are considerably more complicated than what's going on in this code. I'd assume the intent of this exercise is just to write it simply, and loop through every dino, returning only the ones that match the condition. This means you need to make an ArrayList object (or another collection of your choice), loop through, add only the matches ones, then return that collection.