I am using the material-ui and redux-form to control a web form with multiple checkboxes, what I excepted is when ticking the checkbox, it will dispatch an action to update the value(language:['English'] -> language: ['English', 'Spanish']) in redux-form rather than adding a new attribute (such as Spanish:true), the issue could be I register different Files for per language, Could anyone help?
Here is the screenshot of checkboxes
Here is the code: checkbox
import React from 'react';
import { Field } from 'redux-form';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
const renderCheckbox = ({ input, label }) => (
<div>
<FormControlLabel
control={<Checkbox checked={!!input.value} onChange={input.onChange} />}
label={label}
/>
</div>
);
export class FormCheckbox extends React.Component {
render() {
const { languages, label } = this.props;
return (
<>
<div>
{languages.map((language, index) => (
<Field
key={index}
name={language.name}
label={language.name}
component={renderCheckbox}
/>
))}
</div>
</>
);
}
}
index.js
const languages = ['Spanish', Norwegian]
<FormCheckbox
name={'languages'}
label={'configuration.agent.language'}
languages={languages}
/>
const mapStateToProps = (state, ownProps) => ({
initialValues: {language: ['English']}
const mapDispatchToProps = dispatch => ({});
let Form = reduxForm({
form: 'SelectForm',
enableReinitialize: 'true',
})(Form);
how to solve this problem?