How to use axios.all or promise.all to call all ajax calls just once? React
0
I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?
The call:
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)
Someone could help me? PLEASE???
reactjs promise axios
asked Nov 11 '18 at 0:02
JeanJean
376
add a comment |
0
I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?
The call:
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)
Someone could help me? PLEASE???
reactjs promise axios
asked Nov 11 '18 at 0:02
JeanJean
376
add a comment |
0
0
0
I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?
The call:
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)
Someone could help me? PLEASE???
reactjs promise axios
asked Nov 11 '18 at 0:02
JeanJean
376
I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?
The call:
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)
Someone could help me? PLEASE???
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
reactjs promise axios
reactjs promise axios
asked Nov 11 '18 at 0:02
JeanJean
376
asked Nov 11 '18 at 0:02
JeanJean
376
asked Nov 11 '18 at 0:02
JeanJean
376
asked Nov 11 '18 at 0:02
JeanJean
376
asked Nov 11 '18 at 0:02
JeanJean
376
376
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 '18 at 1:00
NaismithNaismith
1356
thank you very much, your answer helped me a lot
– Jean
Nov 11 '18 at 1:39
add a comment |
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
);
);
draft saved
draft discarded
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%2f53244628%2fhow-to-use-axios-all-or-promise-all-to-call-all-ajax-calls-just-once-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 '18 at 1:00
NaismithNaismith
1356
thank you very much, your answer helped me a lot
– Jean
Nov 11 '18 at 1:39
add a comment |
1
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 '18 at 1:00
NaismithNaismith
1356
thank you very much, your answer helped me a lot
– Jean
Nov 11 '18 at 1:39
add a comment |
1
1
1
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 '18 at 1:00
NaismithNaismith
1356
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 '18 at 1:00
NaismithNaismith
1356
answered Nov 11 '18 at 1:00
NaismithNaismith
1356
answered Nov 11 '18 at 1:00
NaismithNaismith
1356
answered Nov 11 '18 at 1:00
NaismithNaismith
1356
1356
thank you very much, your answer helped me a lot
– Jean
Nov 11 '18 at 1:39
add a comment |
thank you very much, your answer helped me a lot
– Jean
Nov 11 '18 at 1:39
thank you very much, your answer helped me a lot
– Jean
Nov 11 '18 at 1:39
thank you very much, your answer helped me a lot
– Jean
Nov 11 '18 at 1:39
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53244628%2fhow-to-use-axios-all-or-promise-all-to-call-all-ajax-calls-just-once-react%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
