I have a problem troubleshooting EsLint error
ESLint: Must use destructuring props assignment (react/destructuring-assignment).
The linter requires destructuring the props, but if I do that, I get an undefined parameter.
In my code, I am trying to get a parameter from a URL.
What am I doing wrong?
Here I indicate what parameters should be in the URL:
<Route path="/confirm-register/:userName?" component={ConfirmRegistrationPage} />
My original code, it works as expected, the userName parameter gets a string value:
strong textconst ConfirmRegistrationPage = (props) => {
const { userName } = props.match.params;
return (
<>
<h1>Congratulations, {userName}! </h1>
</>
);
};
What I have tried. In this case, userName is undefined:
strong textconst ConfirmRegistrationPage = ({ userName }) => {
return (
<>
<h1>Congratulations, { userName }! </h1>
</>
);
};
eslint settings:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"eslint-config-airbnb"
],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11
},
"plugins": [
"react"
],
"rules": {
"react/jsx-filename-extension" : "off",
"react/prop-types": "off",
"import/no-named-as-default": "off",
"import/no-named-as-default-member": "off",
"react/jsx-one-expression-per-line": "off"
}
}
Edit props destructuring. I would choose the first variant. Its more readable.
// first variant
strong textconst ConfirmRegistrationPage = ({ match }) => {
const { userName } = match.params
return (
<>
<h1>Congratulations, { userName }! </h1>
</>
);
};
// second variant
strong textconst ConfirmRegistrationPage = ({ match: { params: { userName } } }) => {
return (
<>
<h1>Congratulations, { userName }! </h1>
</>
);
};
// third variant
strong textconst ConfirmRegistrationPage = ({ match: { params } }) => {
const { userName } = params
return (
<>
<h1>Congratulations, { userName }! </h1>
</>
);
};