29Jun2022: Dungeons and Dragons API call React SPA

Today I spent a lot of time coding React apps, continuing from yesterday building out a single page application with using react-router-dom to render different pages dynamically (instead of having multiple views). I really enjoyed building out two apps like this today, it helped me remember how to use State and make API calls in the front-end.

State really is very cool. And you get to think through a lot of things from playing with React. One thing I went through today is related to a search bar. I'll actually kind of go through what I built - a search for spells from the Dungeons and Dragons API. The views look like this: Screen Shot 2022-06-29 at 6.23.46 PM.png

The components in this view include a SearchForm (the actual search and submit bar), SpellCard (where it says search for a spell - it's a ternary rendering whether there are spells listed or not, if there are, there will be multiple spells listed that match the query and they're all individual components), and a SpellSearch that holds both the SearchForm and the SpellCard.

In SpellSearch component, there is a function called handleSpellSearch which makes the API call querying all spells that match the terms, and returns the data from the API call to save it in State in the SpellSearch component. This function, handleSpellSearch, is passed as a prop to the SearchForm component. Then, in the SearchForm component, the handleSpellSearch function is called with the formData parameter inputted when the handleSubmit (invoked by the Search button) function runs. So the handleSubmit triggers handleSpellSearch, which SearchForm receives as a prop from SpellSearch, and then passing that information upward, the API call is triggered with the formData, and then State is set in SpellSearch! Tada. That was super complicated but I love how it works. Thanks to my General Assembly teachers for writing this.

I don't know if that makes any sense but that's how the function works and I spent a long time understanding it today.

Then, a list of spells that match the query terms comes up, and then using react-router-dom's Link feature, it links to another component, SpellDetails: Screen Shot 2022-06-29 at 6.24.09 PM.png

This is routed in App as a separate route with the path localhost3000/spell/:spellName So another super cool thing I learned is using the useParams() hook to set that :spellName as a parameter - to be honest I read about it but I'm not 100% sure how it works - either it takes it from that route, or it takes it from state? If someone knows please let me know. But when I set const { spellName } = useParams(), spellName becomes the parameter I can use in the API call! And that allows me to hit the endpoint of retrieving the data for an individual spell to display it all on this component which is dynamically rendered to look like a page!

Isn't React so cool??

Anyways that's what I did today - I also built another basically identical app with another API, but because there was no endpoint, I needed an async function to get it to work (otherwise it kept rendering without the full data retrieved and everything was "undefined") and I'm not sure why my async function wasn't really working. I've sent the code to my senior dev friend to help me out with it so I hope I'll be able to work it out.

🤩 Our Amazing Sponsors 👇