MUI 复选框标签中的两个对象文字

Question

我正在使用 MUI。我有复选框，我想为其添加一个由两个对象文字组成的标签。这是我的 FormGroup.

<FormGroup>
  {data.map((item, index) => {
    return (
      <FormControlLabel
        key={index}
        control={<Checkbox />}
        // I need {item.title} (item.value) here
        label={item.title}
        name={item.title}
        value={item.title}
        onChange={() => handleChange(index)}
        disabled={disabledItems[index]}
        checked={checkedItems[index]}
        color="default"
      />
    )
  })}
</FormGroup>

我的数据如下：

const data = [{title: 'Something', costs: '1 million'}]

但更多 ;).

我能想到的都试过了，但似乎没有必要。最后，我需要一个复选框列表，其中显示名称及其背后的成本（例如比萨（$1,50））

希望有人知道解决方案（或 google 搜索选项，我找不到其他人遇到这个问题，但也许我使用了错误的术语）

Answer 1

你不能只使用 template string 吗？

label={`${item.title} (${item.costs})`}

MUI 复选框标签中的两个对象文字

MUI Two Object literals in label for checkbox

jsx

reactjs

material-ui