In react-redux-form, how to disable submit button until all required field are not filled up

working on a react app from this tutorial, I require a library which handle form and validation and following 2 library comes in the most search results

1. redux-form
2. react-redux-form

First of all, not sure which need to use so tried the later one with following steps

Please check the demo here

1) use createForms() in combineReducers in reducers.js

const initialUserState = { firstName: '', lastName: '', userName: '', email: '', password: '', confirmPassword: '' }; const rootReducer = combineReducers({ ...createForms({ user: initialUserState }) }); 

2) in RegisterPage.js I have used and Component to create form

class RegisterPage extends React.Component { constructor(props) { super(props); this.state = { user: { firstName: '', lastName: '', username: '', email: '', password: '', confirmPassword: '' }, submitted: false }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { const { name, value } = event.target; console.log(`handleChange called => name ${name}, value: ${value}`); const { user } = this.state; this.setState({ user: { ...user, [name]: value } }); } handleSubmit(user) { console.log("handleSubmit state", this.state); this.setState({ submitted: true }); const { user } = this.state; console.log("user", user); const { dispatch } = this.props; dispatch(userActions.register(user)); } render() { return ( <div className="col-md-6 col-md-offset-3"> <h2>Register</h2> <Form model="user" onSubmit={(user) => this.handleSubmit(user)} > <div className="form-group"> <label htmlFor="firstName">First Name</label> <Control.text id="firstName" className="form-control" model=".firstName" onChange={this.handleChange} validators={{ required: isRequired, maxLength: maxLength(50) }} validateOn="blur" /> <Errors model=".firstName" className="errors text-danger" show="touched" messages={{ required: 'Please provide First Name.', maxLength: 'Maximum length can be 50 characters.' }} /> </div> <div className="form-group"> <label htmlFor="lastName">Last Name</label> <Control.text className="form-control" model=".lastName" onChange={this.handleChange} /> </div> <div className="form-group"> <label htmlFor="username">Username</label> <Control.text className="form-control" model=".username" onChange={this.handleChange} /> </div> <div className="form-group"> <label htmlFor="firstName">Email Address</label> <Control.text className="form-control" model=".email" onChange={this.handleChange} /> </div> <div className="form-group"> <label htmlFor="password">Password</label> <Control type="password" className="form-control" model=".password" onChange={this.handleChange} /> </div> <div className="form-group"> <label htmlFor="confirmPassword">Confirm Password</label> <Control type="password" id="confirmPassword" className="form-control" model=".confirmPassword" onChange={this.handleChange} /> </div> <div className="form-group"> <button type="submit" className="btn btn-primary" >Register</button> </div> </Form> </div> ); } } const connectedRegisterPage = connect()(RegisterPage); export { connectedRegisterPage as RegisterPage }; 

and when I click on submit button, the state changed to "USER_REGISTER_REQUEST" state but it adds the additional property in user data as following

user: { confirmPassword : "" email: "" firstName: "" lastName: "" password: "" user.firstName: "foo" << added extra property username: "" 

So my collective queries are (Please allow me to ask similar question in one post, request you to not to downvote, they are all closely-related )

1. Why do we need to define this.state = { user : {} } again in RegisterPage constructor() when we have already define as initialUserState in combineReducer. I am not completely understanding this, Please help me.

2. How to disable submit button until all required field are not filled up? calling from angular background, we use ng-pristine, ng-touched, ng-valid and many other directives to check the form field and write an expression in ng-disabled to disabled submit button.

so does that similar functionality can be implemented in react?

3. Also checked in console that each time focus/blur state is being called unnecessarily (type: "rrf/focus"). How to prevent them or this is normal react behavior and does not impact our page in general?

4. Why is this adding additional data in user object while submit?

5. Which library is more user-friendly from above?