Can't get jest to recognize var value changed in onClick - reactjs

Question

I've got an Address react component which contains an address object defined by {streetAddress, additionalStreetAddress, city, jurisdiction, zipCode}.
Within the JSX I have jurisdiction as a dropdown Select of all the US states.
<Select
id={`${id}-jurisdiction`}
name="jurisdiction"
placeholderOption=" "
labelVisual="State"
value={jurisdiction}
>
{JURISDICTIONS.map((currentJurisdiction) => (
<SelectOption
id={`jurisdiction-${currentJurisdiction}`}
key={currentJurisdiction}
value={currentJurisdiction}
onClick={(e) => { jurisdiction = e.currentTarget.value; }}
>
{currentJurisdiction}
</SelectOption>
))}
</Select>
As you can see, onClick is setting address.jurisdiction to the selected option (i.e. the selected state).
In my test suite I am trying to test that this works by using the following test:
it('should update selected option and updated address jurisdiction when user makes a selection', async () => {
const jurisdictionDropDown = screen.getByRole('combobox');
const user = userEvent.setup();
const selectedJurisdiction = 'MA';
await user.selectOptions(jurisdictionDropDown, [selectedJurisdiction]);
expect(address.jurisdiction).toEqual('MA');
});
The issue I'm seeing is jest is expecting 'MA' but receiving an empty string. Is jurisdiction not being set, or am I referencing it wrong in the expect statement?

Answer 1

From the code, and the fact that you used the word "var" to describe your problem, it sounds like you are setting a normal variable rather than setting and keeping track of state.
Normally, in React you use state to keep track of values changing between renders, otherwise they get lost and you end up with the same initial values. You need to use the useState hook and use that to keep track of your state which hopefully will hopefully make the test pass (assuming it is written correctly).
import React, { useState } from 'react';
const [jurisdiction, setJurisdiction] = useState(JURISDICTIONS[0]);
<Select
id={`${id}-jurisdiction`}
name="jurisdiction"
placeholderOption=""
labelVisual="State"
value={jurisdiction}
>
{JURISDICTIONS.map((currentJurisdiction) => (
<SelectOption
id={`jurisdiction-${currentJurisdiction}`}
key={currentJurisdiction}
value={currentJurisdiction}
onClick={(e) => setJurisdiction(e.currentTarget.value)}
>
{currentJurisdiction}
</SelectOption>
))}
</Select>