I am getting 'Uncaught TypeError: props.handleSelect is not a function'

Question

I am trying to create custom components using TailwindCSS and Vite. While passing a function I get the error 'Uncaught TypeError: props.handleSelect is not a function'.

const Navbar = () => {
  const handleSelect = (option) => {
    option == "Home"
      ? console.log(option)
      : option == "View Submissions"
      ? console.log(option)
      : console.log(option);
  };

  return (
    <div
      className={`bg-primary-700 flex min-h-[50px] min-w-[100vh] flex-row items-center justify-between p-[5px] text-white `}
    >
      <div
        onClick={() => {
          navigate("/home");
        }}
        className={`pl-[20px] font-semibold hover:cursor-pointer`}
      >
        MICROTEK
      </div>
      <div className={`mr-[10px] flex flex-row`}>
        <Menu2
          placeholder="Navigate"
          options={["View Submissions", "Home"]}
          onSelect={handleSelect}
        ></Menu2>
      </div>
    </div>
  );
};

For Menu2

const Menu2 = (props) => {
  const [click, setClick] = useState(false);

  return (
    <div>
      <button
        name={props.name}
        id={props.id}
        required={props.required}
        value={props.value}
        onClick={() => {
          setClick(!click);
        }}
        onChange={props.onChange}
        className={
          `${props.className} ` +
          ` flex min-w-[100px] flex-row items-center  justify-between rounded font-semibold ${
            click ? "bg-primary-700" : "bg-none"
          } border-primary-700 hover:bg-primary-700 border-[2px] pl-[10px]`
        }
      >
        {props.placeholder}
        {click == true ? (
          <img
            src={upIcon}
            style={{ marginTop: "2px", margin: "9px" }}
            height="10px"
            width="20px"
          ></img>
        ) : (
          <img
            src={downIcon}
            style={{ marginTop: "2px", margin: "9px" }}
            height="10px"
            width="20px"
          ></img>
        )}
      </button>

      <div
        className={`${
          click == true ? "" : "hidden"
        }  animate-ease-out shadow-primary-700 absolute min-h-[40px] min-w-[100px] max-w-[200px] rounded bg-white text-black shadow-md`}
      >
        {props.options?.map((options) => {
          return (
            <div
              className="hover:bg-primary-700 p-[10px] hover:text-white "
              key={options}
              onClick={() => {
                props.handleSelect(options);
              }}
            >
              {options}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Menu2;

I've looked at other answers and they mentioned using props or {handleSelect} both of which did not work.

Answer 1

As suggested by @Clarity, try adding a console.log(props) in your Menu.js file.

const Menu2 = (props) => {
  const [click, setClick] = useState(false);
  //this will indicate which props are getting passed
  console.log(props);  

  ...
}

Currently, your function handleSelect accepts a parameter as input. Hence, please try to modify your code as follows:

Pass the handleSelect function as a prop with the same name.

 <div className={`mr-[10px] flex flex-row`}>
    <Menu2
      placeholder="Navigate"
      options={["View Submissions", "Home"]}
      handleSelect={(option) => handleSelect(option)}
    ></Menu2>
  </div>

Now, inside Menu.js, use the following code:

  {props.options?.map((options) => {
        return (
        <div
          className="hover:bg-primary-700 p-[10px] hover:text-white "
          key={options}
          onClick={() => props.handleSelect(options)}
         >
          {options}
        </div>
      );
    })}

Output

On click, you should see the selected option. Now you can add the remaining logic based on your requirements.

Hope that helps.

Answer 2

You're passing the handleSelect prop like this - onSelect={handleSelect}, so in the Menu2 component you can access it like props.onSelect(options);.