Array map into string with line break - React

Question

I have a function which I need to return a string with line breaks, or divs that will render properly

export const showPeople = (peopleArray = []) => {
  let peopleString = peopleArray ? peopleArray.map((people) => {
    <div>
      `${people.name && people.name},
      ${people.last_name && people.last_name}`
    </div>
  }).join('') : ''
  return peopleString
}

I tried with divs, without divs, with return without return, and without join and i get [Object] for each person, in this particular case an empty string

I have seen similar questions but was not able to solve my problem

Like this? codesandbox.io/s/y2v5nr933z

user5734311
– user5734311

2018-09-04 21:17:25 +00:00
Commented Sep 4, 2018 at 21:17 — user5734311
– user5734311, Commented Sep 4, 2018 at 21:17

Dacre Denny · Accepted Answer · 2018-09-04 23:02:39Z

4

If the goal is to reduce a list of items to a single string that is rendered as a multi-line string, then you can use the white-space:pre-wrap; CSS rule to achieve this:

body {
  white-space: pre-wrap;
}

Once you've done that you should be able to render a multiple line string with line breaks on \n characters, as follows:

export const showPeople = (peopleArray = []) => {

  let peopleString = peopleArray ? peopleArray.map((people) => (
      `${people.name ? people.name : ''} ${people.last_name ? people.last_name : ''}`
  })
  .join('\n') : ''

  return peopleString
}

I've posted a working version here for you to see also

Hope this helps!

edited Sep 4, 2018 at 23:02

answered Sep 4, 2018 at 20:31

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

4 Comments

user3808307 Over a year ago

I want the line break between the different people, not between name and last name

Dacre Denny Over a year ago

@user3808307 ah I understand , just updated answer - does this help you?

Dacre Denny Over a year ago

@user3808307 ok , I've just posted an update - does this work for you?

user3808307 Over a year ago

No, I tried that, thanks. I've solved it by doing the map in the render now, None of the solutions work

Jonas Wilms · Accepted Answer · 2018-09-04 20:29:31Z

3

You dont want to return a string you want to return an array of elements:

let peopleString = peopleArray.map((people) => (
  <div>
   {people.name || ""},
   {people.last_name || ""}
  </div>
));
return peopleString

answered Sep 4, 2018 at 20:29

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

Luis felipe De jesus Munoz · Accepted Answer · 2018-09-04 20:41:08Z

3

export const showPeople = (peopleArray = []) => {
  let peopleString = peopleArray ? peopleArray.map(people => 
  `<div>
      ${people.name}, ${people.last_name}
    </div>`
  ).join('') : ''
  return peopleString
}

var peoples = [{name: 'Jhon', last_name: 'Doe'},{name: 'Mario', last_name: 'Peach'}]

var peopleString = peoples.map(people => 
  `<div>
    ${people.name}, ${people.last_name}
  </div>`
).join('')

console.log(peopleString)

document.getElementById('container').innerHTML = peopleString

<div id="container"></div>

edited Sep 4, 2018 at 20:41

answered Sep 4, 2018 at 20:28

Luis felipe De jesus Munoz

8,0133 gold badges38 silver badges54 bronze badges

2 Comments

user3808307 Over a year ago

Hi @Luis That doesn't work, I get weird characters instead of the <div>, it's inward and outward arrows something similar to this <- div -> but with longer lines

user5734311 Over a year ago

This answer ignores the fact that the OP uses React.

Sakhi Mansoor · Accepted Answer · 2018-09-04 20:31:13Z

1

Since you're not doing string concatenation with variables. You need to remove Template Strings inside your divs.

answered Sep 4, 2018 at 20:31

Sakhi Mansoor

8,1325 gold badges24 silver badges38 bronze badges

2 Comments

Barmar Over a year ago

${people.name && people.name} is string concatenation with variables.

user3808307 Over a year ago

I am also concatenating with a comma between name and last name

bozdoz · Accepted Answer · 2018-09-04 20:33:12Z

1

It appears to me that you are not returning anything in that map function:

(people) => { ...string here... }

I would suggest, simply:

(people) => ( ...string here... )

or:

(people) => { return ...string here... }

Another issue might be that what you seem to intend to return in the map function is NOT a string, and probably(?) should be; it's hard to say without seeing the function in context.

answered Sep 4, 2018 at 20:33

bozdoz

12.9k8 gold badges74 silver badges100 bronze badges

Comments

ChazUK · Accepted Answer · 2022-12-21 12:51:49Z

1

So if you specifically want to use the HTML Line Break element to separate the strings you can use this.

import { Fragment, ReactNode } from "react";

const separateWithLineBreaks = (strings: string[]): ReactNode => {
  return (
    <Fragment>
      {strings.map((str, index) => (
        <Fragment key={index}>
          {str}
          {index < strings.length - 1 && <br />}
        </Fragment>
      ))}
    </Fragment>
  );
};

answered Dec 21, 2022 at 12:51

ChazUK

8686 silver badges29 bronze badges

Collectives™ on Stack Overflow

Array map into string with line break - React

6 Answers 6

4 Comments

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related