React: props.<function name> is not a function

Question

I have an error calling my function addQuestion and I got the error:

props.addQuestion is not a function

I have two Components, CampaignMng witch contains QuestionsList component.

My CampaignMng:

export default function CampaignMng(props: ICampaignMngStateProps & 
             ICampaignMngDispatchProps & ICampaignQuestionsProps) {
...

const addQuestion = function(question: Question) {
  console.log(question);
}

return (
     ...

      <TabPanel value={value} index={1}>
        <QuestionsList 
          questions={props.questions}
          campaignQuestions={props.campaign!.questions!}
          addQuestion={props.addQuestion}
          deleteQuestion={props.deleteQuestion}
        />
      </TabPanel>
  );
}

My QuestionsList component

export default function QuestionsList(props: IQuestionsStateProps & 
ICampaignQuestionsProps) {
  const classes = useStyles();

  const onAddQuestion = (question: Question) => {
    return (event: React.MouseEvent) => {
      props.addQuestion(question);
      event.preventDefault();
    }
  }

  ...

  {questions.map(question => (
  <TableRow key={question.id}>
    <TableCell component="th" scope="row">
      {question.title}
    </TableCell>
    <TableCell align="right">{question.language}</TableCell>
    <TableCell align="right">{question.duration}</TableCell>
    <TableCell align="right">{question.type}</TableCell>
    <TableCell align="right">
      <IconButton onClick={ 
             mode == 1 ? () => onAddQuestion(question) :
                               onDeleteQuestion(question)}>
        {mode == 1 ? <AddIcon />:<DeleteIcon />}
      </IconButton>
    </TableCell>
  </TableRow>
))}
...

);

And I have two interfaces: IQuestionsStateProps & ICampaignQuestionsProps

export interface ICampaignQuestionsProps {
  addQuestion: (question: Question) => void; 
  deleteQuestion: (question: Question) => void;
}

export interface IQuestionsStateProps {
  questions: Question[];
  campaignQuestions: Question[];
}

Answer 1

In CampaignMng it seems you are defining addQuestion function there, but then you try to forward the function to QuestionsList from CampaignMng props using addQuestion={props.addQuestion}. Try to just pass the function with:

addQuestion={addQuestion}