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"
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,
});
FormStructure is a Functional Component, so you better render it with the following syntax (JSX):
return (
<Modal
visible={this.state.modalVisible}
onCancel={() => this.setState({ modalVisible: false })}
>
<FormStructure record={record} question={this.state.question} dropdownItems={this.state.dropdownItems)} />
</Modal>
)