Browser Error for React Component Seperation - reactjs

Question

im having a slight problem with my react code, im trying to create a simple react appplication that has seperated components, as im still currently learning. Can someone look at this code and let me know whats going wrong? My dropdown component when added makes the browser load forever, so its something to do with that component, as when removed from app.js, it loads fine
import * as React from "react";
function Dropdown() {
const [food, setFood] = React.useState("fruit");
const [drink, setDrink] = React.useState("water");
const handleFoodChange = (event) => {
setFood(event.target.value);
};
const handleDrinkChange = (event) => {
setDrink(event.target.value);
};
return (
<div>
<Dropdown
label="What do we eat?"
options={[
{ label: "Fruit", value: "fruit" },
{ label: "Vegetable", value: "vegetable" },
{ label: "Meat", value: "meat" },
]}
value={food}
onChange={handleFoodChange}
/>
<Dropdown
label="What do we drink?"
options={[
{ label: "Water", value: "water" },
{ label: "Beer", value: "beer" },
{ label: "Wine", value: "wine" },
]}
value={drink}
onChange={handleDrinkChange}
/>
<p>We eat {food}!</p>
<p>We drink {drink}!</p>
</div>
);
}
export default Dropdown;
Below is how its being imported
import "./App.css";
import Checkbox from "./components/Checkbox";
import Dropdown from "./components/Dropdown";
function App() {
return (
<div>
<Checkbox />
<Dropdown />
<h1>test</h1>
</div>
);
}
export default App;

Answer 1

This is happening because you are importing Dropdown inside Dropdown component.
I updated your code to show you another way to create a Dropdown.
function DropdownContainer() {
const [food, setFood] = React.useState("fruit");
const [drink, setDrink] = React.useState("water");
const handleFoodChange = (event) => {
setFood(event.target.value);
};
const handleDrinkChange = (event) => {
setDrink(event.target.value);
};
return (
<div>
<Dropdown
label="What do we eat?"
selectedOption={food}
options={[
{ label: "Fruit", value: "fruit" },
{ label: "Vegetable", value: "vegetable" },
{ label: "Meat", value: "meat" },
]}
onHandleChange={handleFoodChange}
/>
<Dropdown
label="What do we drink?"
selectedOption={drink}
options={[
{ label: "Water", value: "water" },
{ label: "Beer", value: "beer" },
{ label: "Wine", value: "wine" },
]}
onHandleChange={handleDrinkChange}
/>
<p>We eat {food}!</p>
<p>We drink {drink}!</p>
</div>
);
}
function Dropdown({ selectedOption = "", label = "", options = [], onHandleChange }) {
return (
<select
label={label}
onChange={onHandleChange}
>
{options.map(opt => <option selected={selectedOption === opt.value} value={opt.value}>{opt.label}</option>)}
</ select>
);
}
export function App(props) {
return (
<DropdownContainer />
);
}

Answer 2

Why do you put <Dropdown ...> inside Dropdown function? It causes recursive call and results in infinite loading.
You should use <select ..> like below.
<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>