1
votes

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 enter image description here

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?