As I delve into learning React and Next.js, working with form submissions has been a breeze thanks to react-hook-form. However, I've hit a roadblock when it comes to handling radio buttons in my application. Specifically, there's a step where users need to select one option out of three using radio buttons.
The issue I'm facing is that no matter which radio button I choose, the code always returns paymentMethod: PayPal. It seems like I'm not capturing the selected value correctly from the radio buttons group within my form.
/** @format */
import React, { useContext, useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Cookies from 'js-cookie';
import { Store } from '../utils/Store';
import Layout from '../components/Layout';
import Main from '../components/ui/Main/Main';
import HeadlineThree from '../components/ui/Type/HeadlineThree/HeadlineThree';
import { Controller, useForm } from 'react-hook-form';
import Section from '../components/ui/Section/Section';
import Button from '../components/ui/Button/Button';
export default function Payment() {
const {
handleSubmit,
control,
setValue,
getValues,
formState: { errors },
} = useForm();
const router = useRouter();
const [paymentMethod, setPaymentMethod] = useState('');
const { state, dispatch } = useContext(Store);
const {
cart: { shippingAddress },
} = state;
useEffect(() => {
if (!shippingAddress.address) {
router.push('/shipping');
} else {
setPaymentMethod(Cookies.get('paymentMethod') || '');
}
}, []);
const submitHandler = data => {
console.log(data);
if (!paymentMethod) {
console.log(data);
} else {
console.log('ahora no');
// dispatch({ type: 'SAVE_PAYMENT_METHOD', payload: paymentMethod });
// Cookies.set('paymentMethod', paymentMethod);
// router.push('/placeorder');
}
};
return (
<Layout title='Payment Method'>
<Main css='padding--32'>
<form
onSubmit={handleSubmit(submitHandler)}
className='display--grid gap--8'
>
<HeadlineThree>Payment Methods</HeadlineThree>
<Controller
name='paymentMethod'
control={control}
defaultValue='PayPal'
render={({ field }) => (
<label>
<input name='paymentMethod' type='radio' {...field} />
<span>PayPal</span>
</label>
)}
></Controller>
<Controller
name='paymentMethod'
control={control}
defaultValue='Stripeaaa'
render={({ field }) => (
<label>
<input
defaultChecked='true'
name='paymentMethod'
type='radio'
{...field}
/>
<span>Stripe</span>
</label>
)}
></Controller>
<Controller
name='paymentMethod'
control={control}
defaultValue='Cash'
render={({ field }) => (
<label>
<input
name='paymentMethod'
type='radio'
value='Cash'
{...field}
/>
<span>Cash</span>
</label>
)}
></Controller>
<Section>
<Button type='submit' kind='action'>
Continue
</Button>{' '}
<Button onClick={() => router.push('/shipping')}>Back</Button>
</Section>
</form>
</Main>
</Layout>
);
}
Upon executing this code snippet, I consistently receive an Object {paymentMethod: "PayPal"}, leading me to believe that the first radio button in the group is always being selected by default. I suspect there may be something missing in my implementation to properly capture the user-selected value instead of defaulting to the first option every time.