Struggling with checkboxes in a form

Hi,

I’m trying to continue working with forms to implement checkboxes. I can’t decide if it’s better to map the different options which is an array of objects [{name: checkbox1, checked: false} …] (just like in the select field) to checkboxes within a checkbox common component or if its better to map it in the form.jsx and create several checkboxes.

I keep getting the error “options.map is not a function” when i click the checkbox. It seems like the map() function only works with an array, but I can’t see what i’m doing different compared to the select field.

Has anyone done this and can give a few fingerpointers?

Here is my checkbox component.

 const Check = ({ name, value, onChange, error, ...rest }) => (
  <div className="form-check mb-3">
    <label>
      <input
        type="checkbox"
        name={name}
        checked={value}
        onChange={onChange}
        className="form-check-input"
        key={name}
      />
      {name}
    </label>
    {error && <div className="alert alert-danger">{error}</div>}
  </div>
);

Here is the render function in the form.jsx.

  renderCheck(options) {
    const { data, errors } = this.state;

    return (
      <div>
        {options.map((interest) => (
          <Check
            name={interest.name}
            checked={interest.value}
            onChange={this.handleCheckboxChange}
            error={errors[interest.name]}
            key={interest.name}
          />
        ))}
      </div>
    );
  }