question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Impossible to use custom props in Field component

See original GitHub issue

When we use custom props in Field component, we have this error.

[ts] Property 'leftIconName' does not exist on type '(IntrinsicAttributes & IntrinsicClassAttributes<Field<FieldAttributes>> & Readonly<{ children?: R...'.

public renderForm = props => (
  <form onSubmit={props.handleSubmit}>
    <Field
      required
      component={TextInput}
      leftIconName="user"
      name="email"
      placeholder="example@payfit.fr"
      type="email"
    />
    <Field
      required
      component={TextInput}
      leftIconName="lock"
      name="password"
      placeholder="Your password"
      type="password"
    />
    <Button
      className="pt-fill"
      iconName="log-in"
      intent={Intent.PRIMARY}
      loading={props.isSubmitting}
      type="submit"
    >
      Sign in
    </Button>
  </form>
)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
alexhoocommented, Dec 21, 2017

Same error for me when i try to use Fabric components.

    <ComboBox label={label}
              ariaLabel={label}
              allowFreeform={false}
              required={true}
              autoComplete="on"
              onChanged={params => input.onChange(params.text)}
              useComboBoxAsMenuWidth={true}
              options={options}
        />
);
<Field name="audienceCB"
           component={ renderCombobox }
           label="Audience"
           options={audienceOptions} 
/>

// error TS2339: Property 'options' does not exist on type '(IntrinsicAttributes & IntrinsicClassAttributes<Field<GenericFieldHTMLAttributes>> & Readonly<{ c...'.
0reactions
riflercommented, May 19, 2018

but leftIconName now is untyped. For example

<Field
    name="name"
    component={YourComponent}
    yourComponentProp="lihgt" // oops typo
/>

TS doesn’t print any errors. In redux-form I made such wrappers:

import { MyTextInput, MyTextInputProps } from './MyTextInputComponent';
import { WrappedFieldProps, GenericField, Field } from 'redux-form';

type FormTextInputProps = MyTextInputProps & WrappedFieldProps;

export const FormTextInput: React.SFC<FormTextInputProps> = (props) => {
        const {
            input: { value, onChange },
            meta: { error, invalid, touched },
            ...myTextInputProps // TS infers type here
        } = props;
        return <div>
              <MyTextInput {...myTextInputProps} />
              {invalid && touched && Boolean(error) && <div className="">{error}</div>}
        </div>;
}

export const FormTextField = Field as new () => GenericField<TextInputProps>;

and usage:

<FormTextField
     name="name" // prop from 'redux-form'
     component={FormTextInput} // prop from 'redux-form'
     size="s" // prop from my component, it is a union 'xs' | 's' | 'm', and I can't make a typo here
     theme="normal" // similarly, union, I can't make a typo here too
/>
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to pass props to custom components in react-select
It's better to pass custom props via select: props.selectProps. To avoid re-creating of Custom component each time Select updates, ...
Read more >
Advanced customization - React Jsonschema form
The following props are passed to a custom field template component: id : The id of the field in the hierarchy. You can...
Read more >
Field Components - React-admin - Marmelab
Field Components. A Field component displays a given property of a REST resource. Such components are used in the List and Show views,...
Read more >
Field - Redux Form
Object with custom props to pass through the Field component into a component provided to component prop. This props will be merged to...
Read more >
Writing your own Components - AdminJS
The methods are split into .add() and .override() as a safety layer, so you don't accidentally override an internal component with a custom...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found