I've been exploring how to create custom input fields for redux-form.
My journey began by examining the Material UI example found in the documentation here.
const renderTextField = ({input, label, meta: { touched, error }, ...custom }) =>
<TextField
hintText={label}
floatingLabelText={label}
errorText={touched && error}
{...input}
{...custom}
/>
Afterwards, I delved into the definitely typed type definitions for redux-form and discovered the interfaces that define what I needed here.
interface WrappedFieldProps {
input: WrappedFieldInputProps;
meta: WrappedFieldMetaProps;
}
However, it seems that they are not exported which raised a question - how do I incorporate this interface into a renderField function if I cannot access it?
I am considering whether I may be taking the wrong approach or overlooking something obvious.
It seems unlikely that the official documentation is incorrect, so could there be an issue with the type definitions not being exported properly?
One workaround could involve having the render function accept props:any, but this would essentially nullify the purpose of the type definitions!
const renderTextField = (props:any) => {
const {input, label, meta: { touched, error }, ...custom } = props;
return (
<TextField
hintText={label}
floatingLabelText={label}
errorText={touched && error}
{...input}
{...custom}
/>
);
}
This means that not only can I not utilize the interfaces in my own code, but they also wouldn't be leveraged when passing the function to
<Field component={renderTextField} />