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;

CodePudding user response：

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 />
  );
}

CodePudding user response：

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>