DISCUSSION: Use of react-form (problem with prop validations)

[tomitrescak]

Hi. While prop validation surely adds some safety to react components, it also raises several issues. One of the biggest ones is thta components cannot be further extended, for example with redux form as they complain a lot.

For example, this is how naive version of implementing a Select component in redux-form looks like:

export const FormSelect = (props: FormSelectProps) => (
  <Field {...props} component={Form.Select} />
);

And this is what needs to be done in case we want to get rid of warnings:

const Select = (props: any) => {
  const { input, ...rest }  = props;
  return (
    <Form.Select onBlur={() => input.onBlur()} onChange={(_e: any, val: any) => input.onChange(val.value)} value={input.value}  {...rest} />
  )
}

export const FormSelect = (props: FormSelectProps) => (
  <Field {...props} component={Select} />
);

Any idea how can this be simplified, or just get rid of those warnings?

[levithomason]

Can you please specify the warnings you are seeing that you'd like to go away? I cannot tell from the code which are problematic.

[tomitrescak]

All warnings that complain that given property (input, meta) does not exists on SUI React Elements. These properties are passed from the wrapping Field down to SUI Element.

[levithomason]

In order for us to be able to make code changes that fix the issue, we'll need very specific information. It would be most helpful if you could post the full warning messages that you feel should be removed, then we can assess them and possibly make changes.

[tomitrescak]

@levithomason For example following:

app.js:5134Warning: Unknown props `input`, `meta` on <span> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

input and meta are redux form props that are passed to child controls. My guess is that there in nothing that can be done and those properties need to be filtered out.

[levithomason]

Ah, these are built-in React warnings, not ours. React warns anytime you pass an invalid html attribute to a DOM node. In this case, the setup you are using is passing input and meta to a span tag, which is not valid HTML, so React is complaining.

If these are Redux Form props, then Redux Form should be "consuming" them. You are supposed to consume all props your components use, and only pass on extra props. All our components do this and are tested to do so 👍

Unless I'm still missing something here (totally possible!), this issue should be opened on Redux Form.

[levithomason]

Here is one of their issues, noting the same problem with meta on a div.

redux-form/redux-form#1952