CODEWITHSUNDEEP
javascriptreactjs
alar
alar

Reputation: 207

Separate elements inside array

I have react property as array and I want to split those elements with -. I tried to use .split('-') but didn't work.

<Application
  property={['name', 'lastName']}
/>

So, name and last name should be: Name - Last Name

Inside Applications:

return (
                  <div key={`propName-${value}`}>
                    <span>{value}</span>
                    {' '} // the space is for: Name (space) LastName (space)
                  </div>
                )

Upvotes: 0

Views: 130

Answers (2)

aopanasenko
aopanasenko

Reputation: 478

Update:

In your component add this code:

// In your component
const [firstName, lastName] = property;

return (
  <div key={`propName-${value}`}>
    <span>
      {`${firstName} - ${lastName}`}   
    </span>                
  </div>
)

or

// In your component
const fullName = property.join(' - ');

return (
  <div key={`propName-${value}`}>
    <span>
      {fullName}   
    </span>               
  </div>
)

You can do it like this:

const arr = ['name', 'lastName'];

const fullName = arr.join(' - ');

Or use this directly in your component with property

Upvotes: 0

keikai
keikai

Reputation: 15146

Update:

Since we need ['name', '-', 'lastName'], we can simply add it using Array.prototype.splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

const data = ['name', 'lastName'];
data.splice(1, 0, '-')
console.log(data);  // ["name", "-", "lastName"]

Use Array.prototype.join()

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.

<Application
  property={['name', 'lastName'].join('-')}
/>

Upvotes: 1

Related Questions