React State Not Updating with Conditional Statement - reactjs

Question

I have this really strange issue with React.
The following below WORKS. It calls the action creator fetchUserForm which then fetches an object and sets it to the redux storage called userForm. userForm is then called in step1Component if it is loaded.
class FormEdit extends Component {
constructor(props) {
super(props)
this.nextPage = this.nextPage.bind(this)
this.previousPage = this.previousPage.bind(this)
this.updateComponents = this.updateComponents.bind(this)
this.state = {
page: 1,
}
}
componentWillMount() {
this.props.fetchUserForm(this.props.params.id);
}
render() {
const { page } = this.state
return (
<div>
{page === 1 && <Step1Page nextPage={this.nextPage}/>}
</div>
)
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({fetchUserForm}, dispatch);
}
function mapStateToProps(state) {
return { userForm: state.newForm.userForm,
};
}
export default connect(null, mapDispatchToProps)(FormEdit);
Reducer:
const INITIAL_STATE = {
userForm:'false'
};
case FETCH_USER_FORM:
console.log("----------------> REDUCER: updating custom form");
console.log(action.payload);
return {...state, userForm: action.payload };
Step1Page Component:
render() {
if(!this.props.userForm){
return(
<div> LOADING </div>
)
}
return(
<div> Actual Content </div>
)
The above works perfectly. However, this is where my strange issue occurs. I want to do something with the userForm in the FormEdit component. I can't use the form until it fully loads so I add this to FormEdit:
if(!this.props.userForm){
return(
<div> LOADING </div>
)
}
return(
<div> "Actual Content </div>
)
EXCEPT when I add this to FormEdit, I'm stuck at the LOADING div forever. When I view the react tools, it says that the userForm is set to false.This makes no sense because when I view the console.log it says:
Which means it was passed to the reducer. However, even when it's passed, looking at react tools it says that the userForm is still "false".
IF I remove the conditional in FormEdit, everything works again and the userForm is filled with the objects. So I'm really confused why the conditional in my FormEdit component is causing such an issue. When it's not added, everything works fine. But when it is added, the reducer state remains false.

Answer 1

In FormEdit you don't have the userform property.
You have to pass mapStateToProps into the connect function.
export default connect(mapStateToProps, mapDispatchToProps)(FormEdit);