Question 72584 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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.

    enter image description here

    Hope that helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search