Complited Module 9: Working with APIs

[ajay-dhangar]

Making API calls with axios

import React, { useState, useEffect } from "react";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users")
      .then((response) => setUsers(response.data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

What are asynchronous operations?

 import React, { useState, useEffect } from "react";

 function AsyncOperationExample() {
   const [loading, setLoading] = useState(true);

   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
     }, 3000);
   }, []);

   return (
     <div>
       <h2>Async Operation Example</h2>
       {loading ? <p>Loading...</p> : <p>Async operation completed!</p>}
     </div>
   );
 }

 export default AsyncOperationExample;

Rendering fetched data in React components

import React, { useState, useEffect } from "react";
import axios from "axios";

function FetchDataExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/users");
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>Fetch Data Example</h2>
      {loading ? <p>Loading...</p> : (
        error ? <p>Error: {error}</p> : (
          <ul>
            {data && data.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        )
      )}
    </div>
  );
}

export default FetchDataExample;

[sonarcloud[bot]]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud