Почему не ловит e.target.value в select?

Question

[BranchInCode]

Выбираю из выпавшего списка локацию, но события нигде не произсодит, почему так, в чем ошибка?

<CustomSelect
    options={createOptions(locations, "location")}
    placeholder='Loactions'
    value={selectedLocation}
    onChange={(e) => console.log(e.target.value)}
/>

Код:

import React, { useState, useEffect } from "react";
import CustomSelect from "../CustomSelect/CustomSelect";
import "./style.css";

const Filter = () => {
  const [locations, setLocations] = useState([]);
  const [selectedLocation, setSelectedLocation] = useState("");

  const getInfo = async (argument, fn) => {
    const data = await fetch(
      `https://test-front.framework.team/${argument}`,
    ).then((response) => response.json());
    fn(data);
  };

  const createOptions = (array, property) => {
    return array.map((el) => ({
      value: el[property],
      label: el[property],
    }));
  };

  useEffect(() => {
    getInfo("locations", (data) => setLocations(data));
  }, []);

  return (
    <section className='filter'>
      <div className='container'>
        <div className='wrapper'>
          <CustomSelect
            options={createOptions(locations, "location")}
            placeholder='Loactions'
            value={selectedLocation}
            onChange={(e) => console.log(e.target.value)}
          />
        </div>
      </div>
    </section>
  );
};
export default Filter;

Код Select:

import React, { useState } from "react";
import { FaCaretDown } from "react-icons/fa";
import { IoCloseOutline } from "react-icons/io5";
import Select from "react-select";
import "./style.css";

const customSelectStyles = {
  container: (baseStyles) => ({
    ...baseStyles,
    maxWidth: "265px",
    width: "100%",
  }),
  control: (baseStyles) => ({
    ...baseStyles,
    boxSizing: "border-box",
    boxShadow: "none",
    border: "1px solid hsl(0, 0%, 20%)",
    borderRadius: "8px",
    padding: "14px 5px 14px 15px",
    fontSize: "13px",
    "&:hover": {
      borderColor: "none",
    },
  }),
  IndicatorsContainer: (baseStyles) => ({
    ...baseStyles,
    margin: "0 14px 0 0",
  }),
  valueContainer: (baseStyles, state) => ({
    ...baseStyles,
    margin: 0,
    padding: 0,
  }),
  singleValue: (baseStyles, state) => ({
    ...baseStyles,
    margin: 0,
    padding: 0,
  }),
};

const CustomSelect = (props) => {
  return (
    <Select
      isClearable
      placeholder={props.placeholder}
      classNamePrefix='custom-select'
      components={{
        ClearIndicator: () => <IoCloseOutline />,
        IndicatorSeparator: () => null,
        DropdownIndicator: () => <FaCaretDown />,
      }}
      styles={customSelectStyles}
      options={props.options}
    />
  );
};

export default CustomSelect;

Comments

[szQocks]

код селекта покажи

[BranchInCode]

szQocks, добавил

[szQocks]

BranchInCode, ты не повесил обработчик на Select который из "react-select"

<Select
      isClearable
      placeholder={props.placeholder}
      classNamePrefix='custom-select'
      components={{
        ClearIndicator: () => <IoCloseOutline />,
        IndicatorSeparator: () => null,
        DropdownIndicator: () => <FaCaretDown />,
      }}
      styles={customSelectStyles}
      options={props.options}
      onChange={props.onChange}
    />

[BranchInCode]

szQocks, благодарю, заработало. кидайте в ответ.

Answer 1

[szQocks]

ты не повесил обработчик на Select который из "react-select"

<Select
      isClearable
      placeholder={props.placeholder}
      classNamePrefix='custom-select'
      components={{
        ClearIndicator: () => <IoCloseOutline />,
        IndicatorSeparator: () => null,
        DropdownIndicator: () => <FaCaretDown />,
      }}
      styles={customSelectStyles}
      options={props.options}
      onChange={props.onChange}
    />