In this tutorial, you will learn how to show dynamic profile cards while fetching API data using Axios😃 video tutorial: https://www.youtube.com/watch?v=1EMz54RsNI4
Setup:
- Create a new folder and call it Profile Card
- Within the Profile Card folder create a new react app using npx create-react-app profilecard
- Once the app is installed, within the master directory of the app, install react-bootstrap and Axios, by doing npm axios. Inside of your src/index.js file
4. We will work within the src/App.js file so go ahead and open it up. Startup the app using npm start
5. Go ahead and clear all the information within the App.js file and make it look like the one below
6. Now we will import axios useState and useEffect from react
7. We will now create 4 use state variables, one will be used for the profile card name, cell, image, and email within our App variable
8. Now we will create an async function called profileData within our App function that will take a randomuser API and set our useState functions. We will also create a useEffect function that will run our profile Data function.
9. Now we have completed our functionality portion of the tutorial and we will now create our card and a button that will get us a new profile each time. Within your return function go ahead and paste this code in.
10. Now we have created our card we need to now make our card look nicer. Go ahead and create a file in your main directory called Profile.css to import the file within your App.js and add this CSS code within it.
Final code:
Now if you click the “New Person” button you will get a new person each time.😃
Arslan,
Kematix Digital
