Components & Props

Intro about React

With a new phase comes new things to learn, and this phase the focus revolved around REACT. With react we are able to vastly expand on what we had learned about basic Javascript.

To make use of REACT and apply what we have learned our group decided to create an app that made use of of Reacts many functions. Our goal was to create an app that would minimally have multiple components, make use of client side routes, and be able to incorporate an external API. The API we decided on was a database comprised of zoo-animals which included several facts about such animals.

Making use of Components

One of my favorite things about react is the use of components and how easy it is to keep track of ones code. You can easily find exactly what you're looking for, granted you organized your own code to begin with.
Our first step consisted of fetching data from our json file, and setting that equal to our state. However using state will cause our fetch function to re-render again and again as soon as the data extracted is set equal to state. To prevent this we used the useEffect hook to make sure our fetch function only runs once.

Now that we have access to our data, we could then pass this data as a prop to our ZooAnimalList component in order to extract specific parts of our object data such as name, and id just to name a few.

Having extracted the data we wanted, we could now pass on these pieces our ZooAnimalCard component which is in charge of actually displaying these pieces of information on to our DOM with the desired HTML.

Passing data between components is not the only use of props. We can also pass on functions that can be defined in one component and then be used in a completely different one. We managed to pass our data as props from one component to another in order to display our animal cards on screen with the appropriate information. However we also want to be able to submit our own card if we wish to do so. The steps needed for this would be very similar.
We first made an AnimalForm component which took user input through onchange, and onSubmit events. We make a post request to our server. Once a response is received we pass it our handleAddAnimal function as newAnimal.

The handleAddAnimal function was defined in our ZooAnimalPage component but was passed down through props. We can call a function even though it is in a completely different file! By updating our state value to include the newly added user input we can then update the DOM directly.

Components and props have been one of the most interesting and fun concepts I have learned to date. The way they work together to create such great products, it is no surprise why REACT so widely used. While there is still a lot to learn, it is definitely exciting to think of the types of applications I'll be able to create in the future.