How to Send Data From a Form in Next.js

Hi everyone. I have been working on sending data from a form in NextJS. The connection works, but I’m having an issue where all data is being imported as a string. For example, numbers are being imported as a string and any select options are completely ignored. Any suggestions?

Hiya Racheal (Hero):

const client = sanityClient({

projectId: 'xxxxx',

dataset: 'production',

apiVersion: '2021-03-25',

useCdn: false,

token:

process.env.SANITY_API_WRITE_TOKEN ||

'xxxxx',

})

const {

lender,

amountFunded,

balance,

dateFunded,

frequency,

numberOfPayments,

payback,

status,

} = JSON.parse(_req_.body)

try {

await client.create({

_type: 'debt',

lender,

amountFunded,

balance,

dateFunded,

frequency,

numberOfPayments,

payback,

status,

})

} catch (err) {

console.error(err)

`return
res.status(500).json({ message:

Couldn't submit debt

, err })`

}

`return
res.status(200).json({ message:

Debt ${_res_._id} has been created

})`

}

Note that this is essentially a test. I realize you may have received some notifications of earlier questions, which I removed, since I resolved them. My primary issue now is just getting these values to populate other than strings, only

Hmm, that seems right. Can you share an example of the data you're passing to it if you console.log it?

Hmm, that seems right. Can you share an example of the data you're passing to it if you console.log it?

Here’s a screenshot of what I get from Sanity Studio:

The code provided above is from the API. I can also share the form code, if you’d like

I'm curious if the form is passing the incorrect format to that function. I can't see a reason why the request would mutate the type of the data, so maybe it's happening before it even enters that API request.

Perhaps! Here’s the code from the form:

import { useState } from 'react'

import { useForm } from ‘react-hook-form’

export default function DebtAddForm() {
const [formData, setFormData] = useState()
const [isSubmitting, setIsSubmitting] = useState(false)
const [hasSubmitted, setHasSubmitted] = useState(false)
const {
register,
handleSubmit,
formState: { errors },
} = useForm()

const onSubmit = async (

_data_) => {

setIsSubmitting(true)
let response
setFormData(

_data_)

try {
response = await fetch(‘/api/addDebt’, {
method: ‘POST’,
body: JSON.stringify(

_data_),

type: ‘application/json’,
})
setIsSubmitting(false)
setHasSubmitted(true)
} catch (err) {
setFormData(err)
}
}

if (isSubmitting) {
return <h3>Submitting debt...</h3>
}
if (hasSubmitted) {
return (
<>
<h3>Debt submitted</h3>
<ul>
<li>
Lender: {formData.lender} <br />
Amount Funded: {formData.amountFunded} <br />
Balance: {formData.balance} <br />
dateFunded: {formData.dateFunded} <br />
frequency: {formData.frequency} <br />
numberOfPayments: {formData.numberOfPayments} <br />
payback: {formData.payback} <br />
status: {formData.status} <br />
</li>
</ul>
</>
)
}

return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<div>
<label className=‘text-xl block’>Lender</label>
<input
className={
} type=‘text’
name=‘lender’
{...register(‘lender’, { required: true })}
/>
<span className=‘text-red-400 text-sm py-2’>
{errors?.lender?.message}
</span>
</div>
<div>
<label className=‘text-xl block’>Amount Funded</label>
<input
className={
} type=‘number’
name=‘amountFunded’
{...register(‘amountFunded’, { required: true })}
/>
<span className=‘text-red-400 text-sm py-2’>
{errors?.amountFunded?.message}
</span>
</div>
<div>
<label className=‘text-xl block’>Funded Date</label>
<input
className={
} type=‘date’
name=‘dateFunded’
{...register(‘dateFunded’, { required: true })}
/>
<span className=‘text-red-400 text-sm py-2’>
{errors?.amountFunded?.message}
</span>
</div>
<div>
<label className=‘text-xl block’>Current Balance</label>
<input
className={
} type=‘number’
name=‘balance’
{...register(‘balance’, { required: true })}
/>
<span className=‘text-red-400 text-sm py-2’>
{errors?.balance?.message}
</span>
</div>
<div>
<label className=‘text-xl block’>Payback</label>
<input
className={
} type=‘number’
name=‘payback’
{...register(‘payback’, { required: true })}
/>
<span className=‘text-red-400 text-sm py-2’>
{errors?.payback?.message}
</span>
</div>
<div>
<label className=‘text-xl block’>Payment</label>
<input
className={
} type=‘number’
name=‘payment’
{...register(‘payment’, { required: true })}
/>
<span className=‘text-red-400 text-sm py-2’>
{errors?.payment?.message}
</span>
</div>
<div>
<label className=‘text-xl block’>Frequency</label>
<select
className={
} name=‘frequency’
{...register(‘frequency’, { required: true })}
>
<option value=‘Daily’>Daily</option>
<option value=‘Weekly’>Weekly</option>
<option value=‘Bi-Weekly’>Bi-Weekly</option>
<option value=‘Monthly’>Monthly</option>
</select>
<span className=‘text-red-400 text-sm py-2’>
{errors?.frequency?.message}
</span>
</div>
<div>
<label className=‘text-xl block’>numberOfPayments</label>
<input
className={
} type=‘number’
name=‘numberOfPayments’
{...register(‘numberOfPayments’, { required: true })}
/>
<span className=‘text-red-400 text-sm py-2’>
{errors?.numberOfPayments?.message}
</span>
</div>
<div>
<label className=‘text-xl block’>Status</label>
<select
className={
} name=‘status’
{...register(‘status’, { required: true })}
>
<option value=‘Current’>Current</option>
<option value=‘Default’>Default</option>
<option value=‘Restructured’>Restructured</option>
</select>
<span className=‘text-red-400 text-sm py-2’>
{errors?.status?.message}
</span>
</div>
</div>
<div>
<input type=‘submit’ className=‘mt-3 btn1’ />
</div>
</form>
)
}

Got it. It looks like you're stringifying your data:

body: JSON.stringify(data)

Got it. It looks like you're stringifying your data:

body: JSON.stringify(data)

Got it. It looks like you're stringifying your data:

body: JSON.stringify(data)

I was using an example to work from and completely missed it

I've been there!

Feeling like a dummy right now — When no longer stringifying the json data, the fields no longer populate at all. I’ve tried to avoid bothering you any further with this, but I’ve hit a wall. 😞

Feeling like a dummy right now — When no longer stringifying the json data, the fields no longer populate at all. I’ve tried to avoid bothering you any further with this, but I’ve hit a wall. 😞

Don't feel bad about asking questions! I love debugging stuff!

Feeling like a dummy right now — When no longer stringifying the json data, the fields no longer populate at all. I’ve tried to avoid bothering you any further with this, but I’ve hit a wall. 😞

I'll be back with a script/explanation

Thanks again! I really appreciate your time

So, first, we need to configure your JS Client. You're using Next, so we'll follow the usage here .
Then, in your

onSubmit

function, you need to create an object that contains the fields in your form and their values, then use

client.create

. It's surprisingly straightforward if you already have the JS Client configured. Here's a pseudo code version of the script you'll need to run:

Thank you . I'll toy around with this tonight :)

Thank you . I'll toy around with this tonight :)