Why are all my checkboxes in redux form linked

Question

I am trying to create a form with redux-form however I've run into a problem where when I check 1 of my checkboxes they all get checked.

I've created my checkboxes in a form element which gets returned like this:

<div>
    <label>Content Type</label>
    {contentTypes.map(type=> {
        return(
            <Field
                label={type.name}
                name='content-type'
                component={this.renderField}
                content_type={type.type}
                type='checkbox'
                value='text'
            />
        )
    })}
</div>

the renderField function looks like this:

renderField({label, type, value, input, content_type}) {
    return(
        <div className='form-group'>
            <label>{label}</label>
            <input
                {...input}
                className='form-control'
                type={type}
                value={content_type}
                name={input.name}
            />
        </div>
    )
}

I swapped out value for content_type because everytime this runs value is undefined. I'm incredibly new to redux form so if I'm doing something beyond wrong please tell me.

Answer 1

name='content-type'

you need to give them unique names