Setting value in a react-dropdown Dropdown's onChange callback throws an error

Question

I am using Dropdown from react-dropdown to display some options. Every time a user clicks on a option from list, the value of option should change. As per my code, it changes for the first time. However after choosing second time from list, it gives TypeError saying options.map is not a function. How can I fix this?

import React, { useState, useEffect } from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
import "./styles.css";

function App() {
  const [options, setOptions] = useState(["one", "two", "three"]);
  const defaultOption = options[""];
  
  useEffect(() => {
    console.log(options.value);
  }, [options.value]);

  return (
    <div className="App">
      <Dropdown
        options={options}
        onChange={(value) => setOptions(value)}
        value={defaultOption}
        placeholder="Select an option"
      />
    </div>
  );
}
export default App;

Vinicius Katata · Accepted Answer · 2021-04-18 14:44:54Z

3

The problem is that you are changing the array of options as the user select an option in drop down

You must concern if options must be a state or just the selected value

I've rewrote for you as I imagine is the right way to do it

import React, { useState, useEffect } from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
import "./styles.css";

function App() {
  const [selectedOption, setSelectedOption] = useState("");
  const options = ["one", "two", "three"];

  useEffect(() => {
    console.log(selectedOption);
  }, [selectedOption]);

  return (
    <div className="App">
      <Dropdown
        options={options}
        onChange={({ value }) => setSelectedOption(value)}
        value={selectedOption}
        placeholder="Select an option"
      />
    </div>
  );
}
export default App;

answered Apr 18, 2021 at 14:44

Vinicius Katata

1,0615 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting value in a react-dropdown Dropdown's onChange callback throws an error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related