如何以这种方式设置样式/显示此数组？ -CSS / Javascript

Question

我正在学习React。我正在使用演示工作区-Demo Fiddle

我有一个过滤状态变量，该变量具有下拉菜单中的所有过滤项。我能够将过滤后的状态变量显示为数组（如您在pre变量中看到的那样）

我想将此显示为页面中的样式（而不是数组）。我想这样显示-图片。我想显示这样的过滤状态变量

<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解决方案是可以的，但是唯一的主要问题是他/她没有使用循环，没有循环就变成了巨大的代码行。有人可以使用循环来实现此功能吗？ Almost complete fiddle

Answer 1

这是一个可行的示例，

https://codesandbox.io/s/ppq783nx8m

基本上，我检查obj是否为null（如果未添加到名称和显示中）。

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}
    </pre>   

您可以根据需要添加任何样式。希望对您有帮助...