reactjsreact-reduxredux-form

Enable Disable submit button in Parent Component based on Child State using React - Redux Form

I have two components in React - Parent and Child. The Submit button is in the parent component.

My question is how do I enable, disable the submit button in parent component based on redux async validations fail or pass in child component. Also, how would I capture the redux state that a validation has failed and set a prop to be sent to parent and how do I send this prop to parent.

The child component has a redux-form on it and parent component is also connected to redux store.

Both these components are functional components and not class.

Is there any pointer or a sample app already in place for reference? Any pointer is appreciated.

Solution

  • Since your are using Redux Form, your Child form's values are dynamically sent to the store.

    You can read from the store from anywhere (so in your Parent component too) using the redux-form selectors.

    You should be able to access the form values in the parent doing something like

    const myForm= formValueSelector('myFormName')

    Then you can calculate your "isBtnIsDisabled" from "myForm" and send isBtnIsDisabled to your button