So basically I have created a form using react bootstrap. I have used onchange property to set the paymentMethod state according to the option selected. But the problem is: The radio checkbox is only working once. When I click on the stripe checkbox, the state changes. But now when I click paypal again, state doesn't change. I can't figure out where I went wrong or why is this happening.

import React, { useState } from "react";
import { Form, Row, Col, Button } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { savePaymentMethod } from "../actions/cartActions";
import CheckoutSteps from "../components/checkout/CheckoutSteps";
import FormContainer from "../components/FormContainer";

const PaymentPage = () => {
  const shippingAddress = useSelector((state) => state.cart.shippingAddress);

  const [paymentMethod, setPaymentMethod] = useState("Stripe");
  console.log(paymentMethod);

  const dispatch = useDispatch();
  const navigate = useNavigate();

  if (!shippingAddress) {
    navigate("/shipping");
  }

  function submitHandler(e) {
    e.preventDefault();
    dispatch(savePaymentMethod(paymentMethod));
    navigate("/placeorder");
  }
  return (
    <>
      <CheckoutSteps step1 step2 step3 />
      <FormContainer>
        <h2>Payment Method</h2>
        <Form onSubmit={submitHandler}>
          <Form.Group>
            <Form.Label className='my-3' as='legend'>
              Select Method
            </Form.Label>
            <Col>
              <Form.Check
                className='my-3'
                type='radio'
                label='PayPal or Credit Card'
                id='PayPal'
                name='paymentMethod'
                value='PayPal'
                checked
                onChange={(e) => setPaymentMethod(e.target.value)}
              />
              <Form.Check
                className='my-3'
                type='radio'
                label='Stripe'
                id='Stripe'
                name='paymentMethod'
                value='Stripe'
                onChange={(e) => setPaymentMethod(e.target.value)}
              />
            </Col>
          </Form.Group>

          <Button type='submit' variant='primary' className='my-3'>
            Continue
          </Button>
        </Form>
      </FormContainer>
    </>
  );
};

export default PaymentPage;

CodePudding user response：

The checked prop should be dynamic based on the selected radio. And you can use a single function for onChange:

const PaymentPage = () => {
  const [paymentMethod, setPaymentMethod] = useState("Stripe");

  const onPaymentMethodChange = ({ target: { value } }) => {
    setPaymentMethod(value);
  };

  return (
    <>
      <Form.Group>
        <Form.Label className="my-3" as="legend">
          Select Method
        </Form.Label>
        <Col>
          <Form.Check
            className="my-3"
            type="radio"
            label="PayPal or Credit Card"
            id="PayPal"
            name="paymentMethod"
            value="PayPal"
            checked={paymentMethod === "PayPal"}
            onChange={onPaymentMethodChange}
          />
          <Form.Check
            className="my-3"
            type="radio"
            label="Stripe"
            id="Stripe"
            name="paymentMethod"
            value="Stripe"
            checked={paymentMethod === "Stripe"}
            onChange={onPaymentMethodChange}
          />
        </Col>
      </Form.Group>
    </>
  );
};