如何将标签存储在数组中并使用React进行显示

Question

我有一个标签，用于在react中创建的表单。如何显示数组中的值并将其映射到或显示到标签。当前标签文本是硬编码的。

我创建了一个阵列

const labels = [
{ label-one: 'text 1' },
{ label-one: 'text 2' }
]

<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={checkOne}
onClick={() => setCheckOne(!checkOne)}
onChange={checkOne ? null : (event) => handleChange(event)}
name="gilad"
/>
}
label="I would like to replace this text with either text 1 or text 2 thats stored in my array"
/>

Answer 1

{
labels.map(label => (
<FormControlLabel
control={
<Checkbox
checked={checkOne}
onClick={() => setCheckOne(!checkOne)}
onChange={checkOne ? null : (event) => handleChange(event)}
name="gilad"
/>
}
label={label["label-one"]}
/>
))
}

Answer 2

您可以执行以下操作：

{
labels.map(labelName => (
<FormControlLabel
control={
<Checkbox
checked={checkOne}
onClick={() => setCheckOne(!checkOne)}
onChange={checkOne ? null : (event) => handleChange(event)}
name="gilad"
/>
}
label={labelName}
/>
))
}