React Functional Component Radio Button Form Not Rendering Updated Selection

Question

For some reason, even though it seems to work elsewhere, I'm trying to do a simple radio button form and it does not render the updated selection. The state is set up appropriately, however the UI does not show the change. When I update the code and the browser updates the app, for some reason it keeps the current state, and it does actually display the radio button selected. But if I select another radio button, even though the state is changing, the UI still displays the same radio button as before.

I don't know if this makes a difference but this is my react version "react": "17.0.2",.

I'm also using a functional component.

Here's the code:

const [radioState2, setRadioState2] = useState(0);

const setRadioState2Handler = (event) => {
    console.log("setRadioState2Handler()");
    console.log("event");
    console.log(event);
    console.log("event.target.value");
    console.log(event.target.value);
    console.log(typeof event.target.value);
    setRadioState2(parseInt(event.target.value));
  };

<div>
  <form>
    <input type="radio" name="radioform2" value="1" checked={radioState2===1 } onChange={setRadioState2Handler} />{" "} radio <br />
    <input type="radio" name="radioform2" value="2" checked={radioState2===2 } onChange={setRadioState2Handler} />{" "} radio <br />
    <input type="radio" name="radioform2" value="3" checked={radioState2===3 } onChange={setRadioState2Handler} />{" "} radio <br />
  </form>
</div>

Thanks in advance

Answer 1

Thanks to @AdamThomas for the help figuring this out.

it turns out that because the Bootstrap Modal import { Modal } from "react-bootstrap"; is being called inside of a </Dropdown.ItemText>, for some reason it interferes with the proper rendering of the Modal.

The solution was to take out the Modal outside of the modified <Dropdown> component into an arbitrary div.

I created a new button for the dropdown which instead of it being the modal component, it is a simple button that calls a function which sets a variable to true.

Then, I'm passing the variable as a props to the Modal component. I'm also passing a setter function for that state variable to the Modal component.

Then in the modal component I'm 'listening' to changes in the variable with a useEffect and I'm calling the handleShow if that variable is true. In my handleHide function, I reset the variable to false with the setter function from the props.

Now, the button in the dropdown activates the modal, and the radio buttons now work within the modal.

This is clearly some problem with the "react-bootstrap" library.

I also had to delete the actual div of the button from the Modal component and only left the <Modal> element in the render function.

I hope this helps someone!