Avoid using spreading operator for JSX props JS-0428
Prop spreading is forbidden
21createInertiaApp({
22 resolve: (name) => require(`./Pages/${name}`),
23 setup({el, App, props}) {
24 render(<App {...props} />, el);25 },
26}).then(r => console.clear());
Description
We recommend passing props separately to the component instead of using a spread operator for any JSX props.
Here are some reasons to avoid the use of the spreading operator:
- Readability -- being more explicit about what props are received by the component is straightforward.
- Maintainability -- helps avoid passing unintentional extra props.
Reactemit warnings when invalid HTML props are passed to HTML elements. This is suppressed when the spreading operator is used.
Bad Practice
<App {...props} />
<MyCustomComponent {...props} some_other_prop={some_other_prop} />
<img {...props} />
Recommended
const {src, alt} = props;
const {one_prop, two_prop} = otherProps;
<MyCustomComponent one_prop={one_prop} two_prop={two_prop} />
<img src={src} alt={alt} />