Hi all, I'm here with another post to take you through when I released how useful constructing props. I built a react web app where I used an API to fetch Video Games from RAWG API and I ran into some road blocks. This was my first project in react and I had previously worked with worked with an external API so I thought I wouldn't have an issue.
I was wrong.
I first started with fetching my data and storing it in a State Hook. My goal was to make a single page application that populated data in to the DOM and be able save the games that you want to play.
I created a fetch request for my data and initial returned an a nested object so I used dot notation to to get to what I actually needed. (Data.results) I put it in state because I knew that I would need it to change what was display at some point. I passed it down to another component that functioned as a container for my data because I wanted to map over it. Data.results returned an array so I could iterate through it in my container.
I could dot notate through each item in the array at the container level and pass down props off the information that I wanted. However I also wanted to create another component that contained the information this same information on a separate component. I created a function that would post this information to another database and pass it down to to the card component as props.
This function would take in a specific item and post it to a db.json file that I created with JSON-server.
My component that only had the saved games would fetch the object that I saved to the db.json. The issue I ran into was that once it was posted into my db, it now had it's own id and key assigned to it. Initial I was going to make a new component that only rendered the games in the db and not reuse the initial game card component. After a little guidance, research, understanding of how props work. I realized that prop can be anything. You can pass props to a component that represents different things. My card component doesn't need to know what it exactly is it just needs to be the same type to do the same thing or behave the same way. I had 2 come contains that pass similar things and a function that did similar thing. One function posted to my internal db.json and another my set the state what appear on the DOM. I deconstructed what everything was in the parent function before passing it down.
Thank you for reading my blog! I'll post a part 2
Top comments (0)