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>
);
}