React.FC call with multiple parameter

Issue

I am trying to call the function with three parameter but its not working.

Here is the React.FC:

const FormStructure: React.FC<{ record: ModelClass, question: Array<ModelClass>, dropdownItems: Array<ModelTypeClass> }> = ({
    record, question, dropdownItems,
}) => {
...
}

and this is the function call:

return (
   <Modal
      visible={this.state.modalVisible}
      onCancel={() => this.setState({ modalVisible: false })}
   >
      {FormStructure(record, this.state.question, this.state.dropdownItems)}
   </Modal>
)

Following Error Message: "Expected 1-2 arguments, but got 3"

Solution

Since FormStructure is a component, you shouldn't be calling it as a function. You should instead create a JSX element:

<Modal
  visible={this.state.modalVisible}
  onCancel={() => this.setState({ modalVisible: false })}
>
  <FormStructure 
    record={record}
    question={this.state.question}
    dropdownItems={this.state.dropdownItems}
  </FormStructure>
</Modal>

If, hypothetically, you wanted to call it as a function (again, you shouldn't do that since this is a component), the way to conform to the type definition is to pass in an object with three properties:

FormStructure({ 
  record: record,
  question: this.state.question,
  dropdownItems: this.state.dropdownItems,
});

Answered By - Nicholas Tower