Tuesday, February 25, 2020

React Hooks useEffect Example

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function GitHubUsers() {
  const [Userslist, setUserslist] = useState([]);
  useEffect(() => {
    fetch("https://api.github.com/users")
      .then(response => response.json())
      .then(data => {
        setUserslist(data); // set users in state
      });
  }, []); // empty array because we only run once

  return (
    <div className="section">
      {Userslist.map(item=> (
        <div key={item.id} className="card">
          <h5>{item.login}</h5>
        </div>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<GitHubUsers />, rootElement);

No comments:

Post a Comment