How to .join() in React if array doesn't exist initially
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a functional react component that displays information after an api request. Initially the object it displays is blank, since the request hasn't been made. In the object is an array that looks like this:
['US', 'USA', 'United States of America']
When I simply display the array, after the api request, it displays it as a single string on the page with no spaces between ex:
USUSAUnited States of America
Naturally, I want to format it with .join(', ' ) to format the string like US, USA, United States of America, but after I add the .join(', '), it throws an error:
TypeError: props.modalCountry.alt_spellings is undefined
It seems like .join() is trying to run on first render before there is an actual modalCountry object. How do I get this method to not run until the object & array actually exists?
javascript reactjs ecmascript-6
asked Nov 16 '18 at 16:39
peter176peter176
10311
|
show 1 more comment
I have a functional react component that displays information after an api request. Initially the object it displays is blank, since the request hasn't been made. In the object is an array that looks like this:
['US', 'USA', 'United States of America']
When I simply display the array, after the api request, it displays it as a single string on the page with no spaces between ex:
USUSAUnited States of America
Naturally, I want to format it with .join(', ' ) to format the string like US, USA, United States of America, but after I add the .join(', '), it throws an error:
TypeError: props.modalCountry.alt_spellings is undefined
It seems like .join() is trying to run on first render before there is an actual modalCountry object. How do I get this method to not run until the object & array actually exists?
javascript reactjs ecmascript-6
asked Nov 16 '18 at 16:39
peter176peter176
10311
1
We will probably need a bit more of your code to figure this one out. We can't see any of what you are actually doing.
– Caleb H.
Nov 16 '18 at 16:41
@CalebH. My code is literally a functional react component returning {props.modalCountry.alt_spellings} but breaking with {props.modalCountry.alt_spellings.join(', ')}
– peter176
Nov 16 '18 at 16:47
Yes, but how are you getting the alt_spellings loaded?
– Caleb H.
Nov 16 '18 at 16:49
As Ori Drori explained, you can do the check within the functional component itself to ensure you're not calling functions on undefined objects, or you could do a little data sanitation on your response data in the parent component to ensure you're at least passing an array. You can also even still use PropTypes on functional components to also ensure you're not calling array functions (i.e.join) on non-array objects, which would fail equally as badly or worse.
– Drew Reese
Nov 16 '18 at 16:53
is modalCountry from a redux store? why don't you set a default empty array
– Dominic
Nov 16 '18 at 17:04
|
show 1 more comment
I have a functional react component that displays information after an api request. Initially the object it displays is blank, since the request hasn't been made. In the object is an array that looks like this:
['US', 'USA', 'United States of America']
When I simply display the array, after the api request, it displays it as a single string on the page with no spaces between ex:
USUSAUnited States of America
Naturally, I want to format it with .join(', ' ) to format the string like US, USA, United States of America, but after I add the .join(', '), it throws an error:
TypeError: props.modalCountry.alt_spellings is undefined
It seems like .join() is trying to run on first render before there is an actual modalCountry object. How do I get this method to not run until the object & array actually exists?
javascript reactjs ecmascript-6
asked Nov 16 '18 at 16:39
peter176peter176
10311
I have a functional react component that displays information after an api request. Initially the object it displays is blank, since the request hasn't been made. In the object is an array that looks like this:
['US', 'USA', 'United States of America']
When I simply display the array, after the api request, it displays it as a single string on the page with no spaces between ex:
USUSAUnited States of America
Naturally, I want to format it with .join(', ' ) to format the string like US, USA, United States of America, but after I add the .join(', '), it throws an error:
TypeError: props.modalCountry.alt_spellings is undefined
It seems like .join() is trying to run on first render before there is an actual modalCountry object. How do I get this method to not run until the object & array actually exists?
javascript reactjs ecmascript-6
javascript reactjs ecmascript-6
asked Nov 16 '18 at 16:39
peter176peter176
10311
asked Nov 16 '18 at 16:39
peter176peter176
10311
asked Nov 16 '18 at 16:39
peter176peter176
10311
asked Nov 16 '18 at 16:39
peter176peter176
10311
asked Nov 16 '18 at 16:39
peter176peter176
10311
10311
1
We will probably need a bit more of your code to figure this one out. We can't see any of what you are actually doing.
– Caleb H.
Nov 16 '18 at 16:41
@CalebH. My code is literally a functional react component returning {props.modalCountry.alt_spellings} but breaking with {props.modalCountry.alt_spellings.join(', ')}
– peter176
Nov 16 '18 at 16:47
Yes, but how are you getting the alt_spellings loaded?
– Caleb H.
Nov 16 '18 at 16:49
As Ori Drori explained, you can do the check within the functional component itself to ensure you're not calling functions on undefined objects, or you could do a little data sanitation on your response data in the parent component to ensure you're at least passing an array. You can also even still use PropTypes on functional components to also ensure you're not calling array functions (i.e.join) on non-array objects, which would fail equally as badly or worse.
– Drew Reese
Nov 16 '18 at 16:53
is modalCountry from a redux store? why don't you set a default empty array
– Dominic
Nov 16 '18 at 17:04
|
show 1 more comment
1
We will probably need a bit more of your code to figure this one out. We can't see any of what you are actually doing.
– Caleb H.
Nov 16 '18 at 16:41
@CalebH. My code is literally a functional react component returning {props.modalCountry.alt_spellings} but breaking with {props.modalCountry.alt_spellings.join(', ')}
– peter176
Nov 16 '18 at 16:47
Yes, but how are you getting the alt_spellings loaded?
– Caleb H.
Nov 16 '18 at 16:49
As Ori Drori explained, you can do the check within the functional component itself to ensure you're not calling functions on undefined objects, or you could do a little data sanitation on your response data in the parent component to ensure you're at least passing an array. You can also even still use PropTypes on functional components to also ensure you're not calling array functions (i.e.join) on non-array objects, which would fail equally as badly or worse.
– Drew Reese
Nov 16 '18 at 16:53
is modalCountry from a redux store? why don't you set a default empty array
– Dominic
Nov 16 '18 at 17:04
1
1
We will probably need a bit more of your code to figure this one out. We can't see any of what you are actually doing.
– Caleb H.
Nov 16 '18 at 16:41
We will probably need a bit more of your code to figure this one out. We can't see any of what you are actually doing.
– Caleb H.
Nov 16 '18 at 16:41
@CalebH. My code is literally a functional react component returning {props.modalCountry.alt_spellings} but breaking with {props.modalCountry.alt_spellings.join(', ')}
– peter176
Nov 16 '18 at 16:47
@CalebH. My code is literally a functional react component returning {props.modalCountry.alt_spellings} but breaking with {props.modalCountry.alt_spellings.join(', ')}
– peter176
Nov 16 '18 at 16:47
Yes, but how are you getting the alt_spellings loaded?
– Caleb H.
Nov 16 '18 at 16:49
Yes, but how are you getting the alt_spellings loaded?
– Caleb H.
Nov 16 '18 at 16:49
As Ori Drori explained, you can do the check within the functional component itself to ensure you're not calling functions on undefined objects, or you could do a little data sanitation on your response data in the parent component to ensure you're at least passing an array. You can also even still use PropTypes on functional components to also ensure you're not calling array functions (i.e.
join) on non-array objects, which would fail equally as badly or worse.– Drew Reese
Nov 16 '18 at 16:53
As Ori Drori explained, you can do the check within the functional component itself to ensure you're not calling functions on undefined objects, or you could do a little data sanitation on your response data in the parent component to ensure you're at least passing an array. You can also even still use PropTypes on functional components to also ensure you're not calling array functions (i.e.
join) on non-array objects, which would fail equally as badly or worse.– Drew Reese
Nov 16 '18 at 16:53
is modalCountry from a redux store? why don't you set a default empty array
– Dominic
Nov 16 '18 at 17:04
is modalCountry from a redux store? why don't you set a default empty array
– Dominic
Nov 16 '18 at 17:04
|
show 1 more comment
1 Answer
1
active
oldest
votes
In React - Booleans, Null, and Undefined Are Ignored, so you can return null or undefined if the array doesn't exist. Another option is to supply a default array.
Option 1 - Use short circuit evaluation to skip the array.join(), if the array doesn't exist yet:
const Component = ({ arr = }) => (
<div>
{arr && arr.join()}
</div>
);
Option 2 - Render null if no array:
const Component = ({ arr = }) => (
<div>
{arr ? arr.join() : null}
</div>
);
Option 3 - Supply a default array as value:
const Component = ({ arr = }) => (
<div>
{arr.join()}
</div>
);
answered Nov 16 '18 at 16:43
Ori DroriOri Drori
82.4k148998
There isn't a more elegant solution? That seems rather hacky
– peter176
Nov 16 '18 at 16:48
2
These are simple solutions to a simple problem. However, the future is React suspense.
– Ori Drori
Nov 16 '18 at 16:49
1
There is nothing hacky about it, peter. You have a variable that is not initialized. You somehow need to work around this.
– Daniel Hilgarth
Nov 16 '18 at 16:51
@OriDrori short circuit evaluation is the best, but It's unfortunate because this component will never be accessed without the array.
– peter176
Nov 16 '18 at 17:19
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
});
}
});
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%2f53342040%2fhow-to-join-in-react-if-array-doesnt-exist-initially%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
In React - Booleans, Null, and Undefined Are Ignored, so you can return null or undefined if the array doesn't exist. Another option is to supply a default array.
Option 1 - Use short circuit evaluation to skip the array.join(), if the array doesn't exist yet:
const Component = ({ arr = }) => (
<div>
{arr && arr.join()}
</div>
);
Option 2 - Render null if no array:
const Component = ({ arr = }) => (
<div>
{arr ? arr.join() : null}
</div>
);
Option 3 - Supply a default array as value:
const Component = ({ arr = }) => (
<div>
{arr.join()}
</div>
);
answered Nov 16 '18 at 16:43
Ori DroriOri Drori
82.4k148998
There isn't a more elegant solution? That seems rather hacky
– peter176
Nov 16 '18 at 16:48
2
These are simple solutions to a simple problem. However, the future is React suspense.
– Ori Drori
Nov 16 '18 at 16:49
1
There is nothing hacky about it, peter. You have a variable that is not initialized. You somehow need to work around this.
– Daniel Hilgarth
Nov 16 '18 at 16:51
@OriDrori short circuit evaluation is the best, but It's unfortunate because this component will never be accessed without the array.
– peter176
Nov 16 '18 at 17:19
add a comment |
In React - Booleans, Null, and Undefined Are Ignored, so you can return null or undefined if the array doesn't exist. Another option is to supply a default array.
Option 1 - Use short circuit evaluation to skip the array.join(), if the array doesn't exist yet:
const Component = ({ arr = }) => (
<div>
{arr && arr.join()}
</div>
);
Option 2 - Render null if no array:
const Component = ({ arr = }) => (
<div>
{arr ? arr.join() : null}
</div>
);
Option 3 - Supply a default array as value:
const Component = ({ arr = }) => (
<div>
{arr.join()}
</div>
);
answered Nov 16 '18 at 16:43
Ori DroriOri Drori
82.4k148998
There isn't a more elegant solution? That seems rather hacky
– peter176
Nov 16 '18 at 16:48
2
These are simple solutions to a simple problem. However, the future is React suspense.
– Ori Drori
Nov 16 '18 at 16:49
1
There is nothing hacky about it, peter. You have a variable that is not initialized. You somehow need to work around this.
– Daniel Hilgarth
Nov 16 '18 at 16:51
@OriDrori short circuit evaluation is the best, but It's unfortunate because this component will never be accessed without the array.
– peter176
Nov 16 '18 at 17:19
add a comment |
In React - Booleans, Null, and Undefined Are Ignored, so you can return null or undefined if the array doesn't exist. Another option is to supply a default array.
Option 1 - Use short circuit evaluation to skip the array.join(), if the array doesn't exist yet:
const Component = ({ arr = }) => (
<div>
{arr && arr.join()}
</div>
);
Option 2 - Render null if no array:
const Component = ({ arr = }) => (
<div>
{arr ? arr.join() : null}
</div>
);
Option 3 - Supply a default array as value:
const Component = ({ arr = }) => (
<div>
{arr.join()}
</div>
);
answered Nov 16 '18 at 16:43
Ori DroriOri Drori
82.4k148998
In React - Booleans, Null, and Undefined Are Ignored, so you can return null or undefined if the array doesn't exist. Another option is to supply a default array.
Option 1 - Use short circuit evaluation to skip the array.join(), if the array doesn't exist yet:
const Component = ({ arr = }) => (
<div>
{arr && arr.join()}
</div>
);
Option 2 - Render null if no array:
const Component = ({ arr = }) => (
<div>
{arr ? arr.join() : null}
</div>
);
Option 3 - Supply a default array as value:
const Component = ({ arr = }) => (
<div>
{arr.join()}
</div>
);
answered Nov 16 '18 at 16:43
Ori DroriOri Drori
82.4k148998
answered Nov 16 '18 at 16:43
Ori DroriOri Drori
82.4k148998
answered Nov 16 '18 at 16:43
Ori DroriOri Drori
82.4k148998
answered Nov 16 '18 at 16:43
Ori DroriOri Drori
82.4k148998
82.4k148998
There isn't a more elegant solution? That seems rather hacky
– peter176
Nov 16 '18 at 16:48
2
These are simple solutions to a simple problem. However, the future is React suspense.
– Ori Drori
Nov 16 '18 at 16:49
1
There is nothing hacky about it, peter. You have a variable that is not initialized. You somehow need to work around this.
– Daniel Hilgarth
Nov 16 '18 at 16:51
@OriDrori short circuit evaluation is the best, but It's unfortunate because this component will never be accessed without the array.
– peter176
Nov 16 '18 at 17:19
add a comment |
There isn't a more elegant solution? That seems rather hacky
– peter176
Nov 16 '18 at 16:48
2
These are simple solutions to a simple problem. However, the future is React suspense.
– Ori Drori
Nov 16 '18 at 16:49
1
There is nothing hacky about it, peter. You have a variable that is not initialized. You somehow need to work around this.
– Daniel Hilgarth
Nov 16 '18 at 16:51
@OriDrori short circuit evaluation is the best, but It's unfortunate because this component will never be accessed without the array.
– peter176
Nov 16 '18 at 17:19
There isn't a more elegant solution? That seems rather hacky
– peter176
Nov 16 '18 at 16:48
There isn't a more elegant solution? That seems rather hacky
– peter176
Nov 16 '18 at 16:48
2
2
These are simple solutions to a simple problem. However, the future is React suspense.
– Ori Drori
Nov 16 '18 at 16:49
These are simple solutions to a simple problem. However, the future is React suspense.
– Ori Drori
Nov 16 '18 at 16:49
1
1
There is nothing hacky about it, peter. You have a variable that is not initialized. You somehow need to work around this.
– Daniel Hilgarth
Nov 16 '18 at 16:51
There is nothing hacky about it, peter. You have a variable that is not initialized. You somehow need to work around this.
– Daniel Hilgarth
Nov 16 '18 at 16:51
@OriDrori short circuit evaluation is the best, but It's unfortunate because this component will never be accessed without the array.
– peter176
Nov 16 '18 at 17:19
@OriDrori short circuit evaluation is the best, but It's unfortunate because this component will never be accessed without the array.
– peter176
Nov 16 '18 at 17:19
add a comment |
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%2f53342040%2fhow-to-join-in-react-if-array-doesnt-exist-initially%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
1
We will probably need a bit more of your code to figure this one out. We can't see any of what you are actually doing.
– Caleb H.
Nov 16 '18 at 16:41
@CalebH. My code is literally a functional react component returning {props.modalCountry.alt_spellings} but breaking with {props.modalCountry.alt_spellings.join(', ')}
– peter176
Nov 16 '18 at 16:47
Yes, but how are you getting the alt_spellings loaded?
– Caleb H.
Nov 16 '18 at 16:49
As Ori Drori explained, you can do the check within the functional component itself to ensure you're not calling functions on undefined objects, or you could do a little data sanitation on your response data in the parent component to ensure you're at least passing an array. You can also even still use PropTypes on functional components to also ensure you're not calling array functions (i.e.
join) on non-array objects, which would fail equally as badly or worse.– Drew Reese
Nov 16 '18 at 16:53
is modalCountry from a redux store? why don't you set a default empty array
– Dominic
Nov 16 '18 at 17:04