Radio button doesn't refresh instantly when I click on it

Question

I'm having an issue with a radio button for my project. the checked radio is based on the variable users.gender. When I do a console.log of my users.gender I can see that when I click on male or female the value is changing but not the checked radio and I don't know why. I've read online and some people are saying it's because of preventDefault but I don't have one. Here is a part of my code:

import React, { useState } from 'react';
import {Modal, Button, Form, Row, Col, Tab, Tabs} from 'react-bootstrap';
import * as Icon from 'react-bootstrap-icons';

export default function Modalregisterlogin(props) {

    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const [users, setUsers] = useState({
     gender: "",
    });


    const display = e => {
      console.log(users.gender);

    };

    return (
      <>
        <Button variant="primary" onClick={handleShow}>
         {props.page}
        </Button>

        <Modal show={show} onHide={handleClose} size="lg">
          <Modal.Body className="modalcontent" > 
            <Icon.X size={30} className="modalclose" onClick={handleClose}/>
          <Tabs defaultActiveKey={props.tab} id="test">
              <Tab eventKey="register" title="INSCRIPTION">
                  <Form >
                    <Form.Group  as={Row} >
                      <Form.Label column md="3">Genre: {users.gender}</Form.Label> 
                      <Col md="9">
                        <Form.Check 
                          name="gender" 
                          value="male" 
                          inline 
                          checked={users.gender === "male"}
                          label="Male" 
                          type='radio' 
                          onChange={e => setUsers({ gender : 'male'})}/>
                        <Form.Check 
                          name="gender" 
                          value="female" 
                          inline 
                          checked={users.gender === "female"}
                          label="Female" 
                          type='radio' 
                          onChange={e => setUsers({ gender : 'female'})}/>
                     </Col>
                     </Form.Group>  
                </Form>
                <Button variant="primary" type="submit" onClick={display}>
                  Show gender value
                </Button>
              </Tab>

              <Tab eventKey="login" title="CONNEXION">

                <Button variant="primary" type="submit" onClick={handleClose}>
              Se connecter
            </Button>
              </Tab>
          </Modal.Body>

        </Modal>
      </>
    );
  }

Thanks in advance !

Answer 1

I just reproduced your exact code on a sandbox.

I do not see any error in useState function, The error seems to be in the JSX, You don't have any closing tag for Tabs component in the end.

Here is the updated code

<React.Fragment>
  <Button variant="primary" onClick={handleShow}>
    {props.page}
  </Button>

  <Modal show={show} onHide={handleClose} size="lg">
    <Modal.Body className="modalcontent">
      <Tabs defaultActiveKey={props.tab} id="test">
        <Tab eventKey="register" title="INSCRIPTION">
          <Form>
            <Form.Group as={Row}>
              <Form.Label column md="3">
                Genre: {users.gender}
              </Form.Label>
              <Col md="9">
                <Form.Check
                  name="gender"
                  value="male"
                  inline
                  checked={users.gender === "male"}
                  label="Male"
                  type="radio"
                  onChange={e => setUsers({ gender: "male" })}
                />
                <Form.Check
                  name="gender"
                  value="female"
                  inline
                  checked={users.gender === "female"}
                  label="Female"
                  type="radio"
                  onChange={e => setUsers({ gender: "female" })}
                />
              </Col>
            </Form.Group>
          </Form>
          <Button variant="primary" type="submit" onClick={display}>
            Show gender value
          </Button>
        </Tab>

        <Tab eventKey="login" title="CONNEXION">
          <Button variant="primary" type="submit" onClick={handleClose}>
            Se connecter
          </Button>
        </Tab>
      </Tabs>
    </Modal.Body>
  </Modal>
</React.Fragment>

You can refer to this sandbox link to check the correct behaviour. Ignore the icons element in my code, I have removed it because of the package.