api fetch calls react code example

Example 1: await fetch in react

async function fetchFunction() {
  try{
	const response = await fetch(`http://url.com`);
	const json = await response.json();
  }
  catch(err) {
    throw err;
    console.log(err);
  }
}

Example 2: react eznyme fetch api using hooks

//app.js
import React from 'react'
import FetchData from './FetchData'

const fetchUsers = () =>
fetch('https://jsonplaceholder.typicode.com/users').then((res) => res.json())

function App() {
  return (
    <>
      <FetchData fetchUsers={fetchUsers} />
    </>
  )
}

export default App

//fetchdata.js
import React, { useState } from 'react'

function fetchData({ fetchUsers }) {
  const [state, setState] = useState([])

  React.useEffect(() => {
    fetchUsers().then(setState)
  }, [])

  return (
    <>
      {state &&
        state.map((val, id) => (
          <ul key={id}>
            <li>{val.name}</li>
          </ul>
        ))}
    </>
  )
}

export default fetchData

// fetchdata.test.js
import React from 'react'
import { shallow } from 'enzyme'
import FetchData from '../FetchData'

describe('Fetch All Data Hooks', () => {
  let props
  let wrapper
  let useEffect

  const users = [
    { id: 1, name: 'jamal' },
    { id: 2, name: 'karyo' },
    { id: 3, name: 'mirdad' }
  ]

  beforeEach(() => {
    useEffect = jest.spyOn(React, 'useEffect').mockImplementationOnce((f) => f())
    props = { fetchUsers: jest.fn().mockResolvedValue(users) }
    wrapper = shallow(<FetchData {...props} />)
  })

  afterAll(() => {
    jest.clearAllMocks()
  })

  it('result all users', () => {
    expect(useEffect).toHaveBeenCalled()
    expect(props.fetchUsers).toHaveBeenCalled()
    expect(props.fetchUsers).toHaveBeenCalledTimes(1)
    expect(jest.isMockFunction(props.fetchUsers)).toBeTruthy()
  })

  it('find render all users exits count', () => {
    expect(wrapper.find('ul > li')).toHaveLength(3)
    expect(
      wrapper.containsAllMatchingElements([
        <ul>
          <li>jamal</li>
        </ul>,
        <ul>
          <li>karyo</li>
        </ul>,
        <ul>
          <li>mirdad</li>
        </ul>
      ])
    ).toBeTruthy()
  })
})