Eslint-plugin-react: Don't warn in react/jsx-props-no-spreading when all properties are listed explicitly.

[MattSmiglarski]

A syntactic workaround for avoiding repetition in the following JSX:

<Foo prop1={prop1} prop2={prop2} prop3={prop3} />

..is to instead write:

<Foo {... { prop1, props2, prop3 }} />

The reason for react/jsx-props-no-spreading is to encourage being explicit with properties, while allowing exceptions to be configured for Higher Ordered Components. The above example is not a HOC, but is explicit about the properties.

Therefore, there should be a configuration to allow this case ("spreading of an inline object literal that does not itself contain any spreads"), perhaps even as a default.

That said, ideally JSX would provide a nicer non-repetitive syntax for the above.

[ljharb]

An option to allow this case sounds great, and does not conflict with the impetus for the rule - that implicit spreading is an antipattern.

[pawelnvk]

I added #2449, that might help here. I thought for a while about allowing also to handle cases when some given props are assigned to dedicated variable and than spread, e.g.:

const modalProps = { prop1, prop2, prop3 };

return <Modal {...modalProps } />

I feel that this could be helpful, yet current implementation is good enough to solve your problem without extending implementation complexity by far. What do you think guys?

[trevtrich]

We're currently using Downshift and it's api provides render props that are things like getInputProps to spread into the input element. Example:

<Downshift
    onChange={selection =>
      alert(selection ? `You selected ${selection.value}` : 'Selection Cleared')
    }
    itemToString={item => (item ? item.value : '')}
  >
    {({
      getInputProps,
      isOpen,
      inputValue
    }) => (
      <div>
        <input {...getInputProps()} />

Not sure how tricky it would be to pickup on cases like this, but thought this might add another element to the conversation here.

[ljharb]

@richardson-trevor there's no good way to pick up on that, and it's debatable whether that's a good pattern anyways. For that case, use an eslint override comment.

[bzamora]

const modalProps = { prop1, prop2, prop3 };

return <Modal {...modalProps } />

Allowing this would be really useful

[ljharb]

@bzamora it's done in #2449.

[bzamora]

@ljharb reading upstream, it seems scenario of using a dedicated variable and then spread isn't covered? If it is, then 👍

See https://github.com/yannickcr/eslint-plugin-react/issues/2439#issuecomment-538664548

[ljharb]

No, it's not, but that would only even be possible to handle if the variable is defined in the same file.

I'd be open to a PR exploring that, but this issue should stay closed, as it's resolved.

[arathjz]

Does anyone followed up this scenario?

const modalProps = { prop1, prop2, prop3 };

return <Modal {...modalProps } />

[ljharb]

@arathjz yes, see #2449 - there's been no followup since.

[arathjz]

@ljharb it seems #2449 does not cover this yet

const modalProps = { prop1, prop2, prop3 };

return <Modal {...modalProps } />
````

it only covers explicit props as 

return
```

According to #2249 tests that case is still displaying:Prop spreading is forbidden