Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

140
Views
onChange function not working in React Bootstrap's Form.Check component

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;
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>
    </>
  );
};
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!