Dynamic Profile Card Generator Using React and Axios

March 07, 2021

  1. 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
  1. Once the app is installed, within the master directory of the app, install Axios, by doing npm axios. Inside of your src/index.js file
npm axios
  1. We will work within the src/App.js file so go ahead and open it up. Startup the app using npm start
npm start
  1. Go ahead and clear all the information within the App.js file and make it look like the one below
<!-- This is App.js -->
import React from 'react';
import "./App.css";

const App = () => {
  return (
    <div className="App">

    </div>
    )
}

export default App;
  1. Now we will import axios useState and useEffect from react
<!-- App.js -->

import React, { useState, useEffect } from "react";
import axios from "axios";
  1. 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
<!-- App.js -->
  const [profileName, setProfileName] = useState("");
  const [profileCell, setProfileCell] = useState("");
  const [profileImage, setProfileImage] = useState("");
  const [profileEmail, setProfileEmail] = useState("");
  1. 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.
<!-- App.js -->
  const profileData = async () => {
    try {
      const res = await axios.get("https://randomuser.me/api/");
      setProfileCell(res.data.results[0].cell);
      setProfileEmail(res.data.results[0].email);
      setProfileImage(res.data.results[0].picture.large);
      setProfileName(
        `${res.data.results[0].name.first} ${res.data.results[0].name.last}`
      );
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    profileData();
  }, []);
  1. 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.
<!-- App.js -->
    <div className="main">
      <button onClick={() => profileData()}>New Person</button>
      <div className="card">
        <img src={profileImage} style={{ width: "100%" }} />
        <h1>{profileName}</h1>
        <p className="title">{profileEmail}</p>
        <p>{profileCell}</p>
        <p>
          <button>Contact</button>
        </p>
      </div>
    </div>
  1. 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.
<!-- Profile.css -->
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
}

.title {
  color: grey;
  font-size: 18px;
}
button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.main {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

Final Code:

App.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./Profile.css";

const App = () => {
  const [profileName, setProfileName] = useState("");
  const [profileCell, setProfileCell] = useState("");
  const [profileImage, setProfileImage] = useState("");
  const [profileEmail, setProfileEmail] = useState("");

  const profileData = async () => {
    try {
      const res = await axios.get("https://randomuser.me/api/");
      setProfileCell(res.data.results[0].cell);
      setProfileEmail(res.data.results[0].email);
      setProfileImage(res.data.results[0].picture.large);
      setProfileName(
        `${res.data.results[0].name.first} ${res.data.results[0].name.last}`
      );
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    profileData();
  }, []);

  return (
    <div className="main">
      <button onClick={() => profileData()}>New Person</button>
      <div className="card">
        <img src={profileImage} style={{ width: "100%" }} />
        <h1>{profileName}</h1>
        <p className="title">{profileEmail}</p>
        <p>{profileCell}</p>
        <p>
          <button>Contact</button>
        </p>
      </div>
    </div>
  );
};

export default App;

Profile.css

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
}

.title {
  color: grey;
  font-size: 18px;
}
button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.main {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

Now if you click the "New Person" button you will get a new person each time.😃

Arslan,

Kematix Digital