title: React-Redux how to use reusable checkbox component for displaying data
body: <p>I have been asked to tamper with React-Redux code (knowing very little at the moment) and update a colleague's front-end code. One of the application's functionality, is for the administrator to create alert notifications and distribute them across different departments. These departments are selected with checkboxes and finally with a 'Send' button, they alert everyone involved. The form with all the necessary fields, is saved in the database. The notification details page, has detailed information and the mockup that we are supposed to produce, has the involved departments with the same form of grouped checkeboxes (along with their checked/unchecked status). 
  My colleague had created a reusable component like so: </p>
  
  <pre><code>import React from "react";
  import { connect } from "react-redux";
  import {reset, change, registerField } from "redux-form";
  import _ from "lodash";
  import DepartmentTypeCheckBoxes from "./ThreatTypeCheckBoxes";
  import { setNotifView, setNotifViewForm } from "Actions/notifView.action";
  import { Label } from "reactstrap";
  import { ICustomProps } from "Entities/baseForm";
  
  interface INotificationState { 
      notifStatus?: boolean;
  
   }
  
  interface IProps extends ICustomProps {
      registerField(): void;
      resetForm(): void;
      changeField(value: any): any;
      setNotifView(view: any): void;
      setNotifViewForm(form: any): void;
  }
  
  class DepartmentType extends React.Component&lt;IProps, IState&gt; {
      constructor(props: IProps) {
          super(props);
          this.state = {
          };
          this.onFieldChange = this.onFieldChange.bind(this);
      }
  
      public componentWillMount() {
          this.props.registerField();
      }
  
      public onFieldChange() {
          if(this.state.status &amp;&amp; this.state.status == true){
              this.setState({ status: false })
              this.props.changeField(false);
          }
          else{
              this.setState({ status: true })
              this.props.changeField(true);
          }
      }
      public componentWillReceiveProps(nextProps: IProps , nextState: IState) {
  
      }
  
      public render() {      
          return (
              &lt;div className="form-group"&gt;
              &lt;div className="f" &gt;
                  &lt;Label for="type"&gt;Department Types&lt;/Label&gt;
                  &lt;div className=""&gt;
                      &lt;div className=""&gt;
                          &lt;DepartmentTypeCheckBoxes id="1" value="option1" label="Development" fieldName="development" formName="CreateAlertNotification"&gt;&lt;/DepartmentTypeCheckBoxes&gt;
                      &lt;/div&gt;
                      &lt;div className=""&gt;
                          &lt;DepartmentTypeCheckBoxes id="2" value="option2" label="Human resources" fieldName="humanResources" formName="CreateAlertNotification"&gt;&lt;/DepartmentTypeCheckBoxes&gt;
                      &lt;/div&gt;
                      &lt;div className=""&gt;
                          &lt;DepartmentTypeCheckBoxes id="3" value="option3" label="Consultance" fieldTag="consultance" formTag="CreateAlertNotification"&gt;&lt;/DepartmentTypeCheckBoxes&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=""&gt;
                          &lt;div className=""&gt;
                      &lt;div className=""&gt;
                          &lt;DepartmentTypeCheckBoxes id="4" value="option4" label="Logistics" fieldTag="logistics" formTag="CreateAlertNotification"&gt;&lt;/DepartmentTypeCheckBoxes&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=""&gt;
                          {this.props.children &amp;&amp; this.props.children}
                      &lt;/div&gt;
                  &lt;/div&gt;                  
              &lt;/div&gt;
          &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = (state: any, ownProps: ICustomProps) =&gt; {
      return {
      };
  };
  
  const mapDispatchToProps = (dispatch: any, ownProps: ICustomProps) =&gt; {
      const formTag = ownProps.formTag;
      const fieldTag = ownProps.fieldTag;
      return {
          registerField: () =&gt; dispatch(registerField(formTag, fieldTag, "FieldArray")),
          changeField: (value: any) =&gt; dispatch(change(formTag, fieldTag, value, false, false)),
          setNotifView: (view: any) =&gt; dispatch(setNotifView(view)),
          setNotifViewForm: (form: any) =&gt; dispatch(setNotifViewForm(form)),
          resetFields: () =&gt; dispatch(reset("CreateAlertNotification")),        
      };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(DepartmentType);
  </code></pre>
  
  <p>and uses it in the submission form like so:</p>
  
  <pre><code>                        &lt;Row&gt;
                              &lt;Col md="6"&gt;
                              { initialValues.ShowDepartmentBoxes &amp;&amp;
                                  &lt;DepartmentType fieldTag="DepType" formTag="CreateAlertNotification"&gt;
                                  &lt;Field name="AnotherCustomField" className="form-control" component={renderField} type="text" label="General Information" /&gt;
                                  &lt;/DepartmentType&gt;
                              }
                              &lt;/Col&gt;
                              &lt;Col md="6"&gt;
                                  &lt;AnotherCustomField fieldTag="SomeFieldName" formTag="CreateAlertNotification" Mode="create"/&gt;
                              &lt;/Col&gt;
                          &lt;/Row&gt;
  </code></pre>
  
  <p>I want to use the same <code>DepartmentType</code> field in my "Notification Details" page, with the values loaded in the notification object from the db. Assuming I have 4 bool values like</p>
  
  <pre><code>notification.IsHumanResourcesAlerted
  notification.IsDevelopmentAlerted,
  notification.IsLogisticsAlerted,
  notification.IsConsultanceAlerted
  </code></pre>
  
  <p>how will I pass them in the details page that is NOT a form and the "value" in the <code>DepartmentTypeCheckBoxes</code> seems to be predefined? </p>
  
  <p>I have not found anything relevant yet and because we are on a tight schedule, I want to try and come up with a solution as possible.
  Any help is appreciated.</p>