Random User List Using React Hooks

Lets Create a random user list using react hooks.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
function App() {
  const [data, setData] = useState([]);
  async function fetchData() {
    try {
      let response = await axios.get("https://randomuser.me/api/?results=5");
      setData(response.data.results);
    } catch (err) {
      console.log(err);
    }
  }
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div className="App">
      {data.map((item, index) => (
        <React.Fragment key={item.phone}>
          <div
            style={{
              borderWidth: 1,
              borderColor: "#e6e6e6",
              borderStyle: "solid",
              marginBottom: 20,
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              boxShadow: "-1px -1px 5px 0px rgba(189,189,189,1)"
            }}
          >
            <div style={{ display: "flex" }}>
              <div style={{ width: 100 }}>
                <img
                  src={item.picture.thumbnail}
                  style={{ width: 75, height: 75, borderRadius: "100%" }}
                  alt=""
                />
              </div>
              <div
                style={{
                  textAlign: "left",
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center"
                }}
              >
                <h3 style={{ margin: 0, padding: 0 }}>
                  {item.name.title} {item.name.first} {item.name.last}
                </h3>
                <h4 style={{ margin: 0, padding: 0, color: "grey" }}>
                  {item.email}
                </h4>
              </div>
            </div>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Leave a comment

Your email address will not be published. Required fields are marked *