Render Array of objects while joining with a string

Question

I have an array of objects such as:

const array = [<Button>abc</Button>, <Button>def</Button>]

where when I render them with:

return array

I get a list of buttons next to each other.

something similar to the top line of this example picture:

However I want to join the buttons so it look like the bottom line. I tried to use array.join("+") but that no longer rendered buttons instead rendering <object object>+<object object>

Is it possible to do this? keep in mind the array needs to be looped to include all items and ideally it knows not to add a + to the last element.

Do you want 2 buttons with a "+" between them? A single button with the button text concatenated with a "+"? No button but just the button text concatenated with a "+"? Can you be a bit more explicit with the expected result? — Drew Reese
– Drew Reese, Commented Nov 14, 2020 at 0:57

Rikin · Accepted Answer · 2020-11-14 01:31:41Z

1

Its a tricky use-case. I was able to achieve writing conditional inside map function.

  {array.map((item, index) => {
    if (index === array.length - 1) {
      return item;
    }
    return [item, "+"];
  })}

Here's working example link: https://stackblitz.com/edit/react-hceymc

edited Nov 14, 2020 at 1:31

answered Nov 14, 2020 at 1:26

Rikin

5,4842 gold badges17 silver badges22 bronze badges

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

Comments

Redemption Okoro · Accepted Answer · 2020-11-14 02:10:33Z

0

Try This

var btns = document.querySelectorAll("button");
var btnArray = [], btnString = "";

btns.forEach(curr => {
    btnArray.push(curr);
});

btnArray.forEach(curr =>{
    btnString += curr.innerText + "+";
});

btnString = btnString.substring(0, btnString.length - 1);
console.log(btnString);

A simpler method using join() would look like this

var btns = document.querySelectorAll("button");
var btnArray = [], btnText = [], btnString = "";

btns.forEach(curr => {
    btnArray.push(curr);
});

btnArray.forEach(curr =>{
    btnText.push(curr.innerText);
});

btnString = btnText.join(" + ");
console.log(btnString);

edited Nov 14, 2020 at 2:10

answered Nov 14, 2020 at 1:35

Redemption Okoro

3751 silver badge11 bronze badges

Collectives™ on Stack Overflow

Render Array of objects while joining with a string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related