通过 prop 传递给子组件的 Function 在调用时不是 function

Question

I have a problem when I pass a function from a parent component to a child component via its props and call that function I get an error saying "your function is not a function".

This is the child component:

const AppointmentItem = (props) => {
  const { authRole, data, chosenItem } = props;

  ...

  <Button
    onClick={() => chosenItem(card.cardId, 'rejected')} // error is not function  
  >

  ...
}

This is the parent component:

const chosenItem = (id, type) => {
  setSelectedItem(id);
  if (type === 'accepted') operation(id, 'accepted');
  if (type === 'rejected') setRejectForm(true);
};

...

<AppointmentItem
  // eslint-disable-next-line
  key={index}
  data={card}
  chosenItem={chosenItem}
  authRole={authRole}
  operation={operation}
/>

When chosenItem is called in the child component I get an error saying chosenItem is not a function.

Answer 1

Code looks fine, the problem is either with setSelectedItem , operation or setRejectForm .

I suggest you put a debugger; statement or a regular breakpoint in chosenItem and inspect each of the functions I mentioned above and see which one is undefined.

If you would like more help/details please upload a reproducible example to code sandbox

Answer 2

you should use proptypes checker to check is function pass as function or not and you should set it to "proptypes.function" and then use proptypes.defaultProps and pass it a null as example --:

classname.defaultProps:{myFunction:null}

className.propType:{

myfunction:proptype.function
}

the answer is remove isrequired and use defalutProps