How to .join() in React if array doesn't exist initially

Question

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?

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.
– Caleb H., Commented Nov 16, 2018 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(', ')} — peter
– peter, Commented Nov 16, 2018 at 16:47
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
– Drew Reese, Commented Nov 16, 2018 at 16:53
is modalCountry from a redux store? why don't you set a default empty array — nanobar
– nanobar, Commented Nov 16, 2018 at 17:04

Ori Drori · Accepted Answer · 2018-11-16 16:43:32Z

5

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, 2018 at 16:43

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

peter Over a year ago

There isn't a more elegant solution? That seems rather hacky

Ori Drori Over a year ago

These are simple solutions to a simple problem. However, the future is React suspense.

Daniel Hilgarth Over a year ago

There is nothing hacky about it, peter. You have a variable that is not initialized. You somehow need to work around this.

peter Over a year ago

@OriDrori short circuit evaluation is the best, but It's unfortunate because this component will never be accessed without the array.

Collectives™ on Stack Overflow

How to .join() in React if array doesn't exist initially

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related