React Map

Displaying 1 - 1 of 1

Fetching data using inbuilt fetch API

All modern browsers come with an inbuilt fetch Web API, which can be used to fetch data from APIs. 
In this tech article, I will to show you how to do fetching data from the JSON Server APIs.

DrupalVIP technical notebook & support

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

const UsingFetch = () => {
  const [users, setUsers] = useState([])

  const fetchData = () => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        return response.json()
      })
      .then(data => {
        setUsers(data)
      })
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <div>
      {users.length > 0 && (
        <ul>
          {users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default UsingFetch
Subscribe to React Map