Карта массива в строку с разрывом строки - React

Question

У меня есть функция, которая мне нужна для возврата строки с разрывами строк или div, которые будут правильно отображаться

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
}

Я попытался с div, без div, с возвратом без возврата и без объединения, и я получаю [Object] для каждого человека, в данном конкретном случае пустую строку

Я видел похожие вопросы, но не смог решить мою проблему

Answer 1

Мне кажется, что вы ничего не возвращаете в этой функции карты:

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

Я бы предложил, просто:

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

или

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

---

Другая проблема может заключаться в том, что то, что вы намереваетесь вернуть в функцию карты, НЕ является строкой, и, вероятно, (?) Должно быть; Трудно сказать, не видя функции в контексте.

Answer 2

Если цель состоит в том, чтобы сократить список элементов до одной строки, которая отображается в виде многострочной строки, то для этого можно использовать правило CSS white-space:pre-wrap;:

body {
  white-space: pre-wrap;
}

Как только вы это сделаете, вы сможете отобразить многострочную строку с разрывами строки на \n символов, как показано ниже:

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

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

  return peopleString
}

Я разместил рабочую версию здесь , чтобы вы также могли ее увидеть

Надеюсь, это поможет!

Answer 3

Вы не хотите возвращать строку, которую хотите вернуть массив элементов:

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

Answer 4

Поскольку вы не делаете конкатенацию строк с переменными. Вам нужно удалить Строки шаблона внутри ваших элементов.

Answer 5

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>