如何在reactjs中动态创建复选框

Question

我的目标是动态创建复选框。 在一个文件中，我已存储

export const Usercredentials = [
    {
        check1: 'iceCreams'
    },
    {
        check2: 'chocolates'
    },
]

现在基于此const用户凭据中值的数量，我需要在另一个文件中创建许多复选框。 这可能很简单，但是我对reactjs完全陌生。有人可以帮我吗 我尝试使用

addCheckbox = () => {
    const { checkboxes } = this.state,
        label = this.refs.label.value;

    checkboxes.push({
        checked: true,
        label
    });

    this.setState({
        checkboxes
    });
}



renderCheckboxes = () => {
  const { checkboxes } = this.state;

  return checkboxes
        .map((checkbox, index) => (
          <div>
            <label>
                <input
                    type="checkbox"
                    checked={checkbox.checked} />
                    {checkbox.label}
            </label>
          </div>
        )
    );
}



render() {

  for (var i = 0; i < Usercredentials.length; i++) {
    checkboxes.push(Usercredentials[i]);
    const result = addCheckbox(props);
  }

  return (
    <div>
        {renderCheckboxes}
        <input ref="label" type="text" />
        <Button variant="contained" type="submit" color="primary" onClick={this.addCheckbox} >
            search
        </Button>
    </div>
  );
}