Why am I getting a 'no-unused-var' error when using in an inline function
Here's a snippent of my code:
const prevState = this.state;
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
It is generating the following error:
Line 52: 'prevState' is assigned a value but
never used no-unused-vars
I'm using the variable in the inline/arrow function. What's the best way to make the error go away?
javascript reactjs ecmascript-6 eslint
asked Nov 21 '18 at 21:39
sshevlyaginsshevlyagin
3341311
add a comment |
Here's a snippent of my code:
const prevState = this.state;
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
It is generating the following error:
Line 52: 'prevState' is assigned a value but
never used no-unused-vars
I'm using the variable in the inline/arrow function. What's the best way to make the error go away?
javascript reactjs ecmascript-6 eslint
asked Nov 21 '18 at 21:39
sshevlyaginsshevlyagin
3341311
add a comment |
Here's a snippent of my code:
const prevState = this.state;
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
It is generating the following error:
Line 52: 'prevState' is assigned a value but
never used no-unused-vars
I'm using the variable in the inline/arrow function. What's the best way to make the error go away?
javascript reactjs ecmascript-6 eslint
asked Nov 21 '18 at 21:39
sshevlyaginsshevlyagin
3341311
Here's a snippent of my code:
const prevState = this.state;
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
It is generating the following error:
Line 52: 'prevState' is assigned a value but
never used no-unused-vars
I'm using the variable in the inline/arrow function. What's the best way to make the error go away?
javascript reactjs ecmascript-6 eslint
javascript reactjs ecmascript-6 eslint
asked Nov 21 '18 at 21:39
sshevlyaginsshevlyagin
3341311
asked Nov 21 '18 at 21:39
sshevlyaginsshevlyagin
3341311
asked Nov 21 '18 at 21:39
sshevlyaginsshevlyagin
3341311
asked Nov 21 '18 at 21:39
sshevlyaginsshevlyagin
3341311
asked Nov 21 '18 at 21:39
sshevlyaginsshevlyagin
3341311
3341311
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Try this (i.e. remove the line where you declare prevState):
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
Eslint is complaining that you have declared the constant prevState without ever using it, afterwards. The correct way to fix the problem is to simply not declare it in the first place.
The prevState inside your setState call is correct - the first argument setState sends to your callback function is the previous state, and this is the one you want to use inside the callback function.
answered Nov 21 '18 at 22:20
TexTex
1,6031627
1
This should be the accepted answer.
– o4ohel
Nov 22 '18 at 4:44
add a comment |
I'm using the variable in the inline/arrow function.
No, you don't. The prevState that you use in the function is declared as the function's parameter. It is shadowing the const-declared prevState from the outer scope.
What's the best way to make the error go away?
Assuming the function is working as is, just omit the const declaration.
answered Nov 21 '18 at 22:09
BergiBergi
371k58553881
add a comment |
I think it is just naming conflict.
// you already declared prevState
const prevState = this.state;
// change to this.setState(previousState =>
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
You actually did not use prevState that you declared
answered Nov 21 '18 at 21:43
fiddlestfiddlest
377524
Yes! Thank you, I forgot that arrow functions had access to the outer context. I'll mark your answer as correct, but to make it even blunter can you replace 'this.setState(prevState =>' with 'this.setState( () =>' ?
– sshevlyagin
Nov 21 '18 at 22:02
Can you just use this.setState({ ...this.state.companies_checked, [target.value]: target.checked}) ? If its not like real time related project, just using setState should be fine.
– fiddlest
Nov 21 '18 at 22:09
2
This isn't a naming conflict, and the proposed solution isn't the correct one. The correct solution would be to deleteconst prevState = this.state;and leave everything else as is. The problem is thatprevStateis declared and never used, thuseslintcomplains about the unused variable. The solution is to not declare the variable in the first place, since it will never be used.
– Tex
Nov 21 '18 at 22:16
1
I downvoted this answer because it suggests an incorrect usage ofsetState. The first argument tosetStateis usually an updater function. The first parameter sent to the updater function bysetStateis the previous state. The correct way to solve the problem is to remove the erroneousprevStatedeclaration and use the previous state argument sent to the updater function bysetState. Following the advice in this answer will lead to non standard behavior. It is likely to appear to work in some cases, but will break in many other cases.
– Tex
Nov 22 '18 at 7:39
1
Thanks for the detailed explanation Tex, I changed the correct mark and feel much smarter :)
– sshevlyagin
Nov 22 '18 at 11:59
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420835%2fwhy-am-i-getting-a-no-unused-var-error-when-using-in-an-inline-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this (i.e. remove the line where you declare prevState):
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
Eslint is complaining that you have declared the constant prevState without ever using it, afterwards. The correct way to fix the problem is to simply not declare it in the first place.
The prevState inside your setState call is correct - the first argument setState sends to your callback function is the previous state, and this is the one you want to use inside the callback function.
answered Nov 21 '18 at 22:20
TexTex
1,6031627
1
This should be the accepted answer.
– o4ohel
Nov 22 '18 at 4:44
add a comment |
Try this (i.e. remove the line where you declare prevState):
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
Eslint is complaining that you have declared the constant prevState without ever using it, afterwards. The correct way to fix the problem is to simply not declare it in the first place.
The prevState inside your setState call is correct - the first argument setState sends to your callback function is the previous state, and this is the one you want to use inside the callback function.
answered Nov 21 '18 at 22:20
TexTex
1,6031627
1
This should be the accepted answer.
– o4ohel
Nov 22 '18 at 4:44
add a comment |
Try this (i.e. remove the line where you declare prevState):
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
Eslint is complaining that you have declared the constant prevState without ever using it, afterwards. The correct way to fix the problem is to simply not declare it in the first place.
The prevState inside your setState call is correct - the first argument setState sends to your callback function is the previous state, and this is the one you want to use inside the callback function.
answered Nov 21 '18 at 22:20
TexTex
1,6031627
Try this (i.e. remove the line where you declare prevState):
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
Eslint is complaining that you have declared the constant prevState without ever using it, afterwards. The correct way to fix the problem is to simply not declare it in the first place.
The prevState inside your setState call is correct - the first argument setState sends to your callback function is the previous state, and this is the one you want to use inside the callback function.
answered Nov 21 '18 at 22:20
TexTex
1,6031627
edited Nov 21 '18 at 22:27
answered Nov 21 '18 at 22:20
TexTex
1,6031627
answered Nov 21 '18 at 22:20
TexTex
1,6031627
answered Nov 21 '18 at 22:20
TexTex
1,6031627
1,6031627
1
This should be the accepted answer.
– o4ohel
Nov 22 '18 at 4:44
add a comment |
1
This should be the accepted answer.
– o4ohel
Nov 22 '18 at 4:44
1
1
This should be the accepted answer.
– o4ohel
Nov 22 '18 at 4:44
This should be the accepted answer.
– o4ohel
Nov 22 '18 at 4:44
add a comment |
I'm using the variable in the inline/arrow function.
No, you don't. The prevState that you use in the function is declared as the function's parameter. It is shadowing the const-declared prevState from the outer scope.
What's the best way to make the error go away?
Assuming the function is working as is, just omit the const declaration.
answered Nov 21 '18 at 22:09
BergiBergi
371k58553881
add a comment |
I'm using the variable in the inline/arrow function.
No, you don't. The prevState that you use in the function is declared as the function's parameter. It is shadowing the const-declared prevState from the outer scope.
What's the best way to make the error go away?
Assuming the function is working as is, just omit the const declaration.
answered Nov 21 '18 at 22:09
BergiBergi
371k58553881
add a comment |
I'm using the variable in the inline/arrow function.
No, you don't. The prevState that you use in the function is declared as the function's parameter. It is shadowing the const-declared prevState from the outer scope.
What's the best way to make the error go away?
Assuming the function is working as is, just omit the const declaration.
answered Nov 21 '18 at 22:09
BergiBergi
371k58553881
I'm using the variable in the inline/arrow function.
No, you don't. The prevState that you use in the function is declared as the function's parameter. It is shadowing the const-declared prevState from the outer scope.
What's the best way to make the error go away?
Assuming the function is working as is, just omit the const declaration.
answered Nov 21 '18 at 22:09
BergiBergi
371k58553881
answered Nov 21 '18 at 22:09
BergiBergi
371k58553881
answered Nov 21 '18 at 22:09
BergiBergi
371k58553881
answered Nov 21 '18 at 22:09
BergiBergi
371k58553881
371k58553881
add a comment |
add a comment |
I think it is just naming conflict.
// you already declared prevState
const prevState = this.state;
// change to this.setState(previousState =>
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
You actually did not use prevState that you declared
answered Nov 21 '18 at 21:43
fiddlestfiddlest
377524
Yes! Thank you, I forgot that arrow functions had access to the outer context. I'll mark your answer as correct, but to make it even blunter can you replace 'this.setState(prevState =>' with 'this.setState( () =>' ?
– sshevlyagin
Nov 21 '18 at 22:02
Can you just use this.setState({ ...this.state.companies_checked, [target.value]: target.checked}) ? If its not like real time related project, just using setState should be fine.
– fiddlest
Nov 21 '18 at 22:09
2
This isn't a naming conflict, and the proposed solution isn't the correct one. The correct solution would be to deleteconst prevState = this.state;and leave everything else as is. The problem is thatprevStateis declared and never used, thuseslintcomplains about the unused variable. The solution is to not declare the variable in the first place, since it will never be used.
– Tex
Nov 21 '18 at 22:16
1
I downvoted this answer because it suggests an incorrect usage ofsetState. The first argument tosetStateis usually an updater function. The first parameter sent to the updater function bysetStateis the previous state. The correct way to solve the problem is to remove the erroneousprevStatedeclaration and use the previous state argument sent to the updater function bysetState. Following the advice in this answer will lead to non standard behavior. It is likely to appear to work in some cases, but will break in many other cases.
– Tex
Nov 22 '18 at 7:39
1
Thanks for the detailed explanation Tex, I changed the correct mark and feel much smarter :)
– sshevlyagin
Nov 22 '18 at 11:59
|
show 3 more comments
I think it is just naming conflict.
// you already declared prevState
const prevState = this.state;
// change to this.setState(previousState =>
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
You actually did not use prevState that you declared
answered Nov 21 '18 at 21:43
fiddlestfiddlest
377524
Yes! Thank you, I forgot that arrow functions had access to the outer context. I'll mark your answer as correct, but to make it even blunter can you replace 'this.setState(prevState =>' with 'this.setState( () =>' ?
– sshevlyagin
Nov 21 '18 at 22:02
Can you just use this.setState({ ...this.state.companies_checked, [target.value]: target.checked}) ? If its not like real time related project, just using setState should be fine.
– fiddlest
Nov 21 '18 at 22:09
2
This isn't a naming conflict, and the proposed solution isn't the correct one. The correct solution would be to deleteconst prevState = this.state;and leave everything else as is. The problem is thatprevStateis declared and never used, thuseslintcomplains about the unused variable. The solution is to not declare the variable in the first place, since it will never be used.
– Tex
Nov 21 '18 at 22:16
1
I downvoted this answer because it suggests an incorrect usage ofsetState. The first argument tosetStateis usually an updater function. The first parameter sent to the updater function bysetStateis the previous state. The correct way to solve the problem is to remove the erroneousprevStatedeclaration and use the previous state argument sent to the updater function bysetState. Following the advice in this answer will lead to non standard behavior. It is likely to appear to work in some cases, but will break in many other cases.
– Tex
Nov 22 '18 at 7:39
1
Thanks for the detailed explanation Tex, I changed the correct mark and feel much smarter :)
– sshevlyagin
Nov 22 '18 at 11:59
|
show 3 more comments
I think it is just naming conflict.
// you already declared prevState
const prevState = this.state;
// change to this.setState(previousState =>
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
You actually did not use prevState that you declared
answered Nov 21 '18 at 21:43
fiddlestfiddlest
377524
I think it is just naming conflict.
// you already declared prevState
const prevState = this.state;
// change to this.setState(previousState =>
this.setState(prevState => ({
companies_checked: {
...prevState.companies_checked,
[target.value]: target.checked
}
}));
You actually did not use prevState that you declared
answered Nov 21 '18 at 21:43
fiddlestfiddlest
377524
answered Nov 21 '18 at 21:43
fiddlestfiddlest
377524
answered Nov 21 '18 at 21:43
fiddlestfiddlest
377524
answered Nov 21 '18 at 21:43
fiddlestfiddlest
377524
377524
Yes! Thank you, I forgot that arrow functions had access to the outer context. I'll mark your answer as correct, but to make it even blunter can you replace 'this.setState(prevState =>' with 'this.setState( () =>' ?
– sshevlyagin
Nov 21 '18 at 22:02
Can you just use this.setState({ ...this.state.companies_checked, [target.value]: target.checked}) ? If its not like real time related project, just using setState should be fine.
– fiddlest
Nov 21 '18 at 22:09
2
This isn't a naming conflict, and the proposed solution isn't the correct one. The correct solution would be to deleteconst prevState = this.state;and leave everything else as is. The problem is thatprevStateis declared and never used, thuseslintcomplains about the unused variable. The solution is to not declare the variable in the first place, since it will never be used.
– Tex
Nov 21 '18 at 22:16
1
I downvoted this answer because it suggests an incorrect usage ofsetState. The first argument tosetStateis usually an updater function. The first parameter sent to the updater function bysetStateis the previous state. The correct way to solve the problem is to remove the erroneousprevStatedeclaration and use the previous state argument sent to the updater function bysetState. Following the advice in this answer will lead to non standard behavior. It is likely to appear to work in some cases, but will break in many other cases.
– Tex
Nov 22 '18 at 7:39
1
Thanks for the detailed explanation Tex, I changed the correct mark and feel much smarter :)
– sshevlyagin
Nov 22 '18 at 11:59
|
show 3 more comments
Yes! Thank you, I forgot that arrow functions had access to the outer context. I'll mark your answer as correct, but to make it even blunter can you replace 'this.setState(prevState =>' with 'this.setState( () =>' ?
– sshevlyagin
Nov 21 '18 at 22:02
Can you just use this.setState({ ...this.state.companies_checked, [target.value]: target.checked}) ? If its not like real time related project, just using setState should be fine.
– fiddlest
Nov 21 '18 at 22:09
2
This isn't a naming conflict, and the proposed solution isn't the correct one. The correct solution would be to deleteconst prevState = this.state;and leave everything else as is. The problem is thatprevStateis declared and never used, thuseslintcomplains about the unused variable. The solution is to not declare the variable in the first place, since it will never be used.
– Tex
Nov 21 '18 at 22:16
1
I downvoted this answer because it suggests an incorrect usage ofsetState. The first argument tosetStateis usually an updater function. The first parameter sent to the updater function bysetStateis the previous state. The correct way to solve the problem is to remove the erroneousprevStatedeclaration and use the previous state argument sent to the updater function bysetState. Following the advice in this answer will lead to non standard behavior. It is likely to appear to work in some cases, but will break in many other cases.
– Tex
Nov 22 '18 at 7:39
1
Thanks for the detailed explanation Tex, I changed the correct mark and feel much smarter :)
– sshevlyagin
Nov 22 '18 at 11:59
Yes! Thank you, I forgot that arrow functions had access to the outer context. I'll mark your answer as correct, but to make it even blunter can you replace 'this.setState(prevState =>' with 'this.setState( () =>' ?
– sshevlyagin
Nov 21 '18 at 22:02
Yes! Thank you, I forgot that arrow functions had access to the outer context. I'll mark your answer as correct, but to make it even blunter can you replace 'this.setState(prevState =>' with 'this.setState( () =>' ?
– sshevlyagin
Nov 21 '18 at 22:02
Can you just use this.setState({ ...this.state.companies_checked, [target.value]: target.checked}) ? If its not like real time related project, just using setState should be fine.
– fiddlest
Nov 21 '18 at 22:09
Can you just use this.setState({ ...this.state.companies_checked, [target.value]: target.checked}) ? If its not like real time related project, just using setState should be fine.
– fiddlest
Nov 21 '18 at 22:09
2
2
This isn't a naming conflict, and the proposed solution isn't the correct one. The correct solution would be to delete
const prevState = this.state; and leave everything else as is. The problem is that prevState is declared and never used, thus eslint complains about the unused variable. The solution is to not declare the variable in the first place, since it will never be used.– Tex
Nov 21 '18 at 22:16
This isn't a naming conflict, and the proposed solution isn't the correct one. The correct solution would be to delete
const prevState = this.state; and leave everything else as is. The problem is that prevState is declared and never used, thus eslint complains about the unused variable. The solution is to not declare the variable in the first place, since it will never be used.– Tex
Nov 21 '18 at 22:16
1
1
I downvoted this answer because it suggests an incorrect usage of
setState. The first argument to setState is usually an updater function. The first parameter sent to the updater function by setState is the previous state. The correct way to solve the problem is to remove the erroneous prevState declaration and use the previous state argument sent to the updater function by setState. Following the advice in this answer will lead to non standard behavior. It is likely to appear to work in some cases, but will break in many other cases.– Tex
Nov 22 '18 at 7:39
I downvoted this answer because it suggests an incorrect usage of
setState. The first argument to setState is usually an updater function. The first parameter sent to the updater function by setState is the previous state. The correct way to solve the problem is to remove the erroneous prevState declaration and use the previous state argument sent to the updater function by setState. Following the advice in this answer will lead to non standard behavior. It is likely to appear to work in some cases, but will break in many other cases.– Tex
Nov 22 '18 at 7:39
1
1
Thanks for the detailed explanation Tex, I changed the correct mark and feel much smarter :)
– sshevlyagin
Nov 22 '18 at 11:59
Thanks for the detailed explanation Tex, I changed the correct mark and feel much smarter :)
– sshevlyagin
Nov 22 '18 at 11:59
|
show 3 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420835%2fwhy-am-i-getting-a-no-unused-var-error-when-using-in-an-inline-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
