I have a component wrapping an ant design form like so:
export interface IMyProps {
onSubmit: () => void,
anInput: React.ReactNode
}
export class MyForm extends React.Component<IMyProps> {
constructor(props: any) {
super(props)
}
render() {
return (
<Form onSubmit={this.props.onSubmit}>
{this.props.anInput}
</Form>
)
}
}
I wanted to be able to pass any ReactNode to my form structure and a function to handle the submiting of the form.
So I also have this component that defines the component passed to MyForm:
export interface IDecoratorProps extends FormComponentProps {
onSubmit: () => void,
value: string
}
class MyDecoratedForm extends React.Component<IDecoratorProps> {
constructor(props: any) {
super(props)
}
render() {
return (
<div><MyFormonSubmit={this.props.onSubmit}anInput={
<Form.Itemlabel={"label"}
hasFeedback>
{
this.props.form.getFieldDecorator(
"label",
{
rules: [{required: true, message: 'This is required'}]
}
)
(
< Input size="large" type="text" value={this.props.value}/>
)
}
</Form.Item>
}/>
</div>
)
}
}
export const MyFormDecorator = Form.create<IDecoratorProps>()(MyDecoratedForm);
And finally I have the Page component that is supposed to pass in the value props and onSubmit props.
Something like this:
...
render() {
<MyFormDecorator value={this.state.value} onSubmit={() => {}}/>
}
My problem is that I have a
TS2339: Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes, ComponentState>> & ...
You are trying to pass the value and onSubmit props to the MyFormDecorator component, but the MyFormDecorator component does not have a value or onSubmit prop defined in its props interface. Instead, it has a form prop of type FormComponentProps, which itself does not have a value or onSubmit prop.
To pass the value and onSubmit props to the MyFormDecorator component, you will need to update the IDecoratorProps interface to include these props. You can do this by extending the FormComponentProps interface and adding the value and onSubmit props:
export interface IDecoratorProps extends FormComponentProps { value: string; onSubmit: () => void; }Then, in the MyDecoratedForm component, you can pass the value and onSubmit props from IDecoratorProps to the Input and MyForm components respectively:
class MyDecoratedForm extends React.Component<IDecoratorProps> { render() { return ( <div> <MyForm onSubmit={this.props.onSubmit} anInput={ <Form.Item label="label" hasFeedback> {this.props.form.getFieldDecorator("label", { rules: [{ required: true, message: "This is required" }] })(<Input size="large" type="text" value={this.props.value} />)} </Form.Item> } /> </div> ); } }Finally, you can pass the value and onSubmit props to the MyFormDecorator component when you render it:
render() { <MyFormDecorator value={this.state.value} onSubmit={() => {}} />; }This should allow you to pass the value and onSubmit props to the MyFormDecorator component and have them available to the child components.