React Basic Hooks - useEffects sample

by Prathameshsb

HTML

<div id="root"></div>
<div id="other-div"></div>

React

const {useState, useEffect} = React;

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

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

  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>
      <button onClick={() => setCount(count - 1)}>Decrement</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>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);