3

I'm relatively new to Redux and I have a form that has some radio inputs "Yes" or "No". Basically, I want to conditionally show another element which contains another redux form field, based on that radio input selection. Is there a straight forward to do this?

I'm trying to just check the formProps.site_visit value, but I get an error about it being undefined. For the record, I've greatly reduced the amount of code in this component for brevity sake.

export class RequestForm extends React.Component {

submit(formProps) {

   const request = {
      square_footage: formProps.get('square_footage'),
      site_visit: formProps.get('site_visit'),
   };

   this.props.dispatch(createRequest(request));
}

// Redux Form Props.
    const { handleSubmit, pristine, reset, submitting } = this.props
    return (
      <form className="page-form__wrapper">
        <div className="page-form__block">
          <div className="page-form__block">
            <p> Is a site visit required to complete this request? </p>
            <Field name="site_visit"
              component={RadioButtonGroup}
            >
              <RadioButton value="true" label="Yes" />
              <RadioButton value="false" label="No" />
            </Field>
          </div>
          {this.formProps.site_visit === true &&
            <div className="page-form__block">
              <p> Estimate the total area of work in square feet </p>
              <Field name="square_footage" component={TextField} hintText="Square Feet" />
            </div>
          }
       </div>
     </form>
   );
}

Thanks in advance!

Stevie Star
  • 2,331
  • 2
  • 28
  • 54

1 Answers1

6

You'll need to use a formValueSelector

const selector = formValueSelector('formName');

function mapStateToProps(state, props) {
    const isChecked = selector(state, 'checkboxField');
    return { isChecked };
}

connect using mapStateToProps

the render method will look like this.

render() {
    return (
        { this.props.isChecked && (
            <div>
                this only shows up if the checkboxField Field is checked
            </div>
        ) }
    );
}

edit:

looks like you're using reselect - I've never used createStructuredSelector and I don't 100% understand the documentation, but a possible solution might be:

const mMapStateToProps = createStructuredSelector({
    request: selectRequestForm(), 
    user: selectUser()
});

const mapStateToProps = (state, props) => {
    return {
        isChecked: selector(state, 'checkboxField'),
        ... mMapStateToProps(state, props) // not sure if createStructuredSelector accepts a props param
    }
};

that'll compose the two. I think you could also use createSelector with mMapStateToProps and the mapStateToProps I originally posted...

Tyler Sebastian
  • 9,067
  • 6
  • 39
  • 62
  • Yes. This is pretty much the exact use case demonstrated in the [Selecting Form Values](http://redux-form.com/6.5.0/examples/selectingFormValues/) example. – Erik R. Mar 22 '17 at 20:13
  • Hm. well my mapStateToProps() looks like: const mapStateToProps = createStructuredSelector({ request: selectRequestForm(), user: selectUser(), }); so I'm not sure how to retrofit this example into that. I inherited this project and don't quite grasp all this connect and stateToProps and all this stuff yet – Stevie Star Mar 23 '17 at 20:31
  • @StevieStar try now – Tyler Sebastian Mar 24 '17 at 17:30
  • This is a shit load of work to get a form value on the form you are working with. – AlxVallejo Jun 20 '19 at 21:22