How to send user data to a Next.js 14 API using a React component.

Question

You are developing a React component to send user data to your Next.js 14 API. How do you formulate the API call to interact with /api/submit-user?

```
// In a React Client Component

function UserForm() {

// What code to interact with "/api/submit-user" API?

}

Accepted Answer

```
const handleSubmit = async (userData) => {
  const response = await fetch('/api/submit-user', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  })

return response.json();
}

Answer

```
const handleSubmit = (userData) => {

return fetch('/api/submit-user', {
    method: 'POST',
    body: new FormData(userData)
  })

}

Answer

```
const handleSubmit = useCallback(async (userData) => {

const res = await fetch('/api/submit-user', {
    method: 'POST',
    body: JSON.stringify(userData),
    headers: { 'Accept': 'application/json' }
  })

return res.ok;

}, [])

Answer

```
async function submitUserData(userData) {

return axios.post('/api/submit-user', userData)

}

Question from the Next.js test

How to send user data to a Next.js 14 API using a React component.