react fetch api POST call code example

Example 1: javascript fetch api post

fetch('https://example.com/profile', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
  	'foo': 'bar'
  }),
})
  .then((res) => res.json())
  .then((data) => {
    // Do some stuff ...
  })
  .catch((err) => console.log(err));

Example 2: react post request

componentDidMount() {
    // Simple POST request with a JSON body using fetch
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    fetch('https://jsonplaceholder.typicode.com/posts', requestOptions)
        .then(response => response.json())
        .then(data => this.setState({ postId: data.id }));
}

Example 3: 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()
  })
})