noDestructuredProps
Summary
Section titled Summary- Diagnostic Category:
lint/nursery/noDestructuredProps - This rule doesn’t have a fix.
- The default severity of this rule is information.
- This rule belongs to the following domains:
- Sources:
- Inspired from
solidjs/no-destructure
- Inspired from
Description
Section titled DescriptionDisallow destructuring props inside JSX components in Solid projects.
In Solid, props must be used with property accesses (props.foo) to preserve reactivity.
Examples
Section titled ExamplesInvalid
Section titled Invalidlet Component = ({}) => <div />;code-block.jsx:1:18 lint/nursery/noDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ You cannot destructure props.
> 1 │ let Component = ({}) => <div />;
│ ^^
2 │
ℹ In Solid, props must be used with property accesses (props.foo) to preserve reactivity.
ℹ Remove the destructuring and use props.foo instead.
let Component = ({ a: A }) => <div a={A} />;code-block.jsx:1:39 lint/nursery/noDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This variable shouldn’t be destructured.
> 1 │ let Component = ({ a: A }) => <div a={A} />;
│ ^
2 │
ℹ This is where the props were destructured.
> 1 │ let Component = ({ a: A }) => <div a={A} />;
│ ^^^^^^^^
2 │
ℹ In Solid, props must be used with property accesses (props.foo) to preserve reactivity.
ℹ Remove the destructuring and use props.foo instead.
let Component = ({ prop1 }: Props) => <div p1={prop1} />;code-block.tsx:1:48 lint/nursery/noDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This variable shouldn’t be destructured.
> 1 │ let Component = ({ prop1 }: Props) => <div p1={prop1} />;
│ ^^^^^
2 │
ℹ This is where the props were destructured.
> 1 │ let Component = ({ prop1 }: Props) => <div p1={prop1} />;
│ ^^^^^^^^^
2 │
ℹ In Solid, props must be used with property accesses (props.foo) to preserve reactivity.
ℹ Remove the destructuring and use props.foo instead.
Valid
Section titled Validlet Component = (props) => <div />;let Component = (props) => <div a={props.a} />;How to configure
Section titled How to configure{ "linter": { "rules": { "nursery": { "noDestructuredProps": "error" } } }}