Maybe some of you could help me. I would like to use DropdownButton to change the language on my website. I managed with Select and changing the language works. Unfortunately there is a problem with img placement in Select so I wanted to do it with DropdownButton. And here I have a problem with getting the value from Dropdown.Item. I get the message: Uncaught TypeError: evt is null. What should I do in such a situation

const DropdownLanguage = () => {
  const { i18n } = useTranslation();
  const [language, setLanguage] = useState("pl");

  const handleLangChange = (evt) => {
    const lang = evt.target.value;
    console.log(lang);
    setLanguage(lang);
    i18n.changeLanguage(lang);
  };

  return (
    <>
      <DropdownButton
        id="dropdown-basic-button"
        title="Dropdown button"
        value={language}
        onSelect={handleLangChange}
      >
        <Dropdown.Item value="pl">
          <img className="flag" src={PL} />
          PL
        </Dropdown.Item>
        <Dropdown.Item value="en">
          <img className="flag" src={UK} />
          EN
        </Dropdown.Item>
      </DropdownButton>
    </>
  );
}

I checked the documentation in React Bootstrap

CodePudding user response：

Problem:

You are using the onSelect prop of the DropdownButton component instead of onClick. The onSelect prop is used to pass a callback function that will be called when an item is selected from the dropdown.

Solution:

Change the onSelect prop to onClick and pass the selected language as a parameter to the handleLangChange function.

Code:

const DropdownLanguage = () => {
      const { i18n } = useTranslation();
      const [language, setLanguage] = useState("pl");
    
 const handleLangChange = (lang) => {
  console.log(lang);
  setLanguage(lang);
  i18n.changeLanguage(lang);
      };
    
   return (
      <>
        <DropdownButton
          id="dropdown-basic-button"
          title="Dropdown button"
          value={language}
        >
          <Dropdown.Item value="pl" onClick={() => handleLangChange("pl")}>
            <img className="flag" src={PL} />
            PL
          </Dropdown.Item>
          <Dropdown.Item value="en" onClick={() => handleLangChange("en")}>
            <img className="flag" src={UK} />
            EN
          </Dropdown.Item>
        </DropdownButton>
      </>
    );
    };

CodePudding user response：

I was reading the react bootstrap documentation and I see that maybe it's the problem.

The select callback sends you 2 parameters, the first is the eventKey and the second is the event.

OnSelect function description:

A callback fired when a menu item is selected.

(eventKey: any, event: Object) => any

Try changing your handleChange funciton:

 const handleLangChange = (evtKey, evt) => {
 const lang = evt.target.value;
 console.log(lang);
 setLanguage(lang);
 i18n.changeLanguage(lang);
 };

Good luck!!

CodePudding user response：

According to the docs, DropdownButton doesn't have prop onSelect. onSelect is only existed in Dropdown, so you can change from DropdownButton to Dropdown.