Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

142
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda