Recently diving into the world of TypeScript and Redux, I've been tackling the SimpleForm example from redux-form.
Below is the form component I'm working with:
import * as React from 'react';
import {Field, reduxForm} from 'redux-form';
class SimpleForm extends React.Component<any, any> {
public render() {
const { handleSubmit, doCancel } = this.props;
return (
<div>
<h1>Simple Form</h1>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text" />
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" component="input" type="text" />
</div>
<div>
<button type="button" onClick={doCancel}>Cancel</button>
<button type="submit">Submit</button>
</div>
</form>
</div>
)};
}
export default reduxForm({ form: "simpleForm" })(SimpleForm);
And here's how I'm using the component:
return (
<div>
<SimpleForm onSubmit={this.handleSubmit} doCancel={this.doCancel} />
</div>
);
However, upon implementation, I'm encountering this error:
TS2339: Property 'doCancel' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'.
If I remove the doCancel prop, the form renders fine but the cancel button is inactive. What could be causing this issue?