[Bugfix] Dropdown: ensure reactivity of components 'selectedItem' prop

[skykanin]

Bug: Changing the selectedItem prop doesn't rerender the component because it's immediately being captures inside a useState hook.

Fix: Add a useEffect hook that runs the setState hooks where selectedItem is being used to initialise the state hooks.

Testing: I tested this by adding a simple component to the storybook and observed that clicking the button to change the selected item works with my fix.

export const SelectItemTest = () => {
	const [select, setSelect] = React.useState();
	return (
		<div>
			<Button onClick={() => setSelect({ title: "Ocean", id: "item3" })}>
				Select Ocean
			</Button>
			<Dropdown header="Menu header" selectedItem={select} items={items} />
		</div>
	);
};

SelectItemTest.story = {
	name: "SelectItem test",
};

[johnnadeluy]

The build is failing on linting;npm run lint:fix should fix it 😊

[johnnadeluy]

This change should be implemented in a separate PR; we are looking into making this component stateless

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud