- #Random fun facts generator how to
- #Random fun facts generator generator
Handle the different size flags more gracefully. Get to know your teammates better by guessing fun facts about each other. This was intentionally simple, so I’m hesitant to improve / extend it much further, but if I did come back to it I would consider doing the following: Create an interactive live quiz with our quiz maker feature Engage your. After some finicky copy-pasting across to each new fact I added, I realised I could just store that in a const and from then on just reference countryName. In each string I referenced the country name and repeatedly used. I also caught myself breaking the cardinal rule of Don’t Repeat Yourself (DRY) when creating the different fact template strings. I took me a while to realise that I could split that up into two steps and make use of the useEffect() hook for both, with the fact generation one relying on countryData being set. I was an experiencing an issue where I was calling generateFact() too quickly after the API call and the data hadn’t yet been set to the state so, when it came to using the country data to build the fact, there was no data there to choose from and it was throwing an error. I spent a lot of time on getting the order and structure of things right in relation to the initial API call. It took around 4.5 hours to build in its current form (as of May 12, 2022). Nothing.ĬSS is handled in a single, separate App.css file. FactCard.js – This component simply renders the fact contents. This function selects a random country from countryData and then selects a random fact from an array of ‘templates’, injecting the country-specific data where appropriate using template literals. After that fetch, and every time a user clicks the “Generate Fact” button, we call the generateFact() function. On initial page load / component render, it fetches all country data from the REST Countries API and stores it in the countryData state. App.js – This component essentially does everything. There are two main components to the app: It was built with React using Create React App as a starting point. Examples include the population number, language spoken and UN membership status. It’s not a trick question when you click the “Generate Fact” button, the app will display a new fact about a random country. #Random fun facts generator generator
Take a wild guess what the Random Country Fact Generator does? I’ve got a few ideas for apps that will use the API, but I thought I’m best starting with the smallest, most straightforward one first.Ĭheck it out here (and the code here). Since finding out how easy it is to get data from an API like that, I knew I needed to create a project with it for some unguided learning.
#Random fun facts generator how to
As part of the React course I’ve been taking on Udemy, it introduced me to the REST Countries API (and how to access APIs with fetch, etc).
0 kommentar(er)
