ReactJS: Join map output with concatenating value

Question

In my ReactJS application I am getting the mobile numbers as a string which I need to break and generate a link for them to be clickable on the mobile devices. But, instead I am getting [object Object], [object Object] as an output, whereas it should be xxxxx, xxxxx, ....

Also, I need to move this mobileNumbers function to a separate location where it can be accessed via multiple components.
For example: Currently this code is located in the Footer component and this code is also need on the Contact Us component.

...
function isEmpty(value) {
    return ((value === undefined) || (value === null))
        ? ''
        : value;
};

function mobileNumbers(value) {
    const returning = [];

    if(isEmpty(value))
    {
        var data = value.split(',');

        data.map((number, index) => {
            var trimed = number.trim();

            returning.push(<NavLink to={`tel:${trimed}`} key={index}>{trimed}</NavLink>);
        });

        return returning.join(', ');
    }

    return '';
};
...

What am I doing wrong here?
Is there any way to create a separate file for the common constants / functions like this to be accessed when needed?

norbitrial · Accepted Answer · 2020-01-02 12:17:07Z

1

First question:

What am I doing wrong here?

The issue what you have is happening because of Array.prototype.join(). If creates a string at the end of the day. From the documentation:

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

Think about the following:

const navLinks = [{link:'randomlink'}, {link:'randomlink2'}];
console.log(navLinks.join(','))

If you would like to use concatenate with , then you can do similarly like this:

function mobileNumbers(value) {
    if(isEmpty(value)) {
        const data = value.split(',');

        return data.map((number, index) => {
            const trimed = number.trim();
            return <NavLink to={`tel:${trimed}`} key={index}>{trimed}</NavLink>;
        }).reduce((prev, curr) => [prev, ', ', curr]);
    }

    return [];
};

Then you need to use map() in JSX to make it work.

Second question:

Is there any way to create a separate file for the common constants / functions like this to be accessed when needed?

Usually what I do for constants is that I create in the src folder a file called Consts.js and put there as the following:

export default {
    AppLogo: 'assets/logo_large.jpg',
    AppTitle: 'Some app name',
    RunFunction: function() { console.log(`I'm running`) }
}

Then simply import in a component when something is needed like:

import Consts from './Consts';

And using in render for example:

return <>
   <h1>{Consts.AppTitle}</h1>
</>

Similarly you can call functions as well.

+1 suggestion:

Array.prototype.map() returns an array so you don't need to create one as you did earlier. From the documentation:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

I hope this helps!

edited Jan 2, 2020 at 12:17

answered Jan 2, 2020 at 11:55

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

3 Comments

Mr.Singh Over a year ago

Thanks @norbitrial, it worked. Happy New Year... :)

norbitrial Over a year ago

@Pummi Awesome, Happy New Year to you too!

norbitrial Over a year ago

@Pummi Just extended my answer with the second question's explanation. I hope that clarifies.

Collectives™ on Stack Overflow

ReactJS: Join map output with concatenating value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related