MUI два объектных литерала в метке для флажка

#reactjs #material-ui #jsx

Вопрос:

Я использую 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, я не могу найти кого-либо еще с этой проблемой, но, возможно, я использую неправильную терминологию)

Ответ №1:

Разве вы не можете просто использовать строку шаблона?

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