Как стилизовать / отобразить этот массив таким образом? - CSS / Javascript

Question

Я изучаю React. Я работаю в демонстрационном рабочем пространстве - Demo Fiddle

У меня есть отфильтрованная переменная состояния, в которой есть все отфильтрованные элементы из выпадающего списка. Я могу показать эту отфильтрованную переменную состояния в виде массива (как вы можете видеть в предварительной переменной)

Я хочу показать это как стиль на странице (вместо массива). Я хочу показать это так - изображение . Я хочу показать отфильтрованную переменную состояния, как это

<div>
<div>id: val0,val1 (and a cross button to remove this filter)</div>
<div>id: val0,val1 (and a cross button to remove this filter)</div> .... so on
</div>

Как мне добиться этого стиля, а также функциональности в моем демонстрационном рабочем пространстве? My Demo Fiddle Форма стиля эллиптическая

Редактировать 1 - Решение @Whatatimetobealive в порядке, но единственная серьезная проблема - он / она не использует цикл, без цикла он превращается в огромные строки кода. Может кто-то реализовать это с помощью цикла Почти полная скрипка

Answer 1

Вот рабочий пример,

https://codesandbox.io/s/ppq783nx8m

По сути, я проверил, что объект не имеет значения, если он не добавлен к именам и дисплею.

<code>let first_names = null;
let last_names = null;
let first_names_label = null;
let last_names_label = null;
if (this.state.filtered.length == 1) {
  if (this.state.filtered[0].id == "firstName") {
    first_names_label = "First Name:";
  } else {
    first_names_label = "Last Name:";
  }
  first_names = this.state.filtered[0].value.map(name => <p>{name}</p>);
} else if (this.state.filtered.length == 2) {
  first_names_label = "First Name:";
  first_names = this.state.filtered[0].value.map(name => <p>{name}</p>);
  last_names_label = "Last Name:";
  last_names = this.state.filtered[1].value.map(name => <p>{name}</p>);
}

return (
  <div>
    <pre>
      {first_names_label}
      {first_names}
      {last_names_label}
      {last_names}
    

Вы можете добавить любой стиль, который вам нравится. Надеюсь, это поможет ...