Redux-form with a progress bar - reactjs

Question

I need some help in figuring out how to add a progress bar to my redux-form to track progress of a password field.
I'm trying to use a component that renders LinearProgress of material-ui, but can't find a good way to pass/access password value.
<Field ...
name="password"
type="password"
label={PASSWORD}
component={renderField} />
<LinearProgress
mode="determinate"
value={this.state.completed} />
this.state.completed should be computed based on the password value.
If there is a standard way to do something like this, I would appreciate a pointer.

Answer 1

Basically you need to
access the password value in the redux store, and
pass that value to your component to calculate some sort of a complexity score
You should use formValueSelector to retrieve the value inside mapStateToProps and then just pass it on as a prop to your component. Example:
import React, { Component } from 'react'
import { formValueSelector, reduxForm, Field } from 'redux-form'
import { connect } from 'react-redux'
class MyForm extends Component {
computePasswordComplexityScore() {
// here you obviously compute whatever score you need
const score = doSomethingWith(this.props.currentPasswordValue)
return score
}
render() {
return (
<Field ...
name="password"
type="password"
label={PASSWORD}
component={renderField} />
<LinearProgress
mode="determinate"
value={ this.computePasswordComplexityScore() } />
)
}
}
const selector = formValueSelector('MyFormName')
const mapStateToProps = state => {
const currentPasswordValue = selector('password')
return { currentPasswordValue }
}
#connect(mapStateToProps)
#reduxForm({ form: 'MyFormName' })
export default class MyFormContainer extends MyForm {}
Hope this helps!