JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class='App'>
<h1>
 In React
Counter code &
</h1>
<h1>
Fetch api and display content and upon clicking on button keeps adding more user
</h1>
</div>

Babel + JSX

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

export default function App() {
  let [count, setCount] = useState(0);
  let [data, setData] = useState([]);
  let [loadMoreData, setLoadMoreData] = useState(1);

  async function fetchData(pageNumber = 1) {
    try {
      const data = await fetch(`https://randomuser.me/api?page=${pageNumber}`);
      const json = await data.json();
      return json;
    } catch {
      console.error("errrrrror");
    }
  }

  const loadMore = () => {
    setLoadMoreData(loadMoreData + 1);
    fetchData(loadMoreData).then((user) => {
      let newUser = [...data, ...user.results];
      setData(newUser);
    });
  };

  useEffect(() => {
    fetchData().then((user) => {
      setData(user.results);
    });
  }, []);

  return (
    <div className="App">
      <h1> Counter code </h1>
      <h1>
        Fetch api and display content and upon clicking on button keeps adding
        more user
      </h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>{count}</p>
      <hr />
      <button onClick={loadMore}>Add More</button>
      {data.map((user, key) => (
        <div key={key}>
          <p key={key}>{user.name.first}</p>
          <img src={user.picture.thumbnail} alt="img" />
        </div>
      ))}
    </div>
  );
}