CODEWITHSUNDEEP
reactjsredux
lost9123193
lost9123193

Reputation: 11030

React State Not Updating with Conditional Statement

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: enter image description here

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.

Upvotes: 1

Views: 587

Answers (1)

Diego Faria
Diego Faria

Reputation: 9185

In FormEdit you don't have the userform property.

You have to pass mapStateToProps into the connect function.

export default connect(mapStateToProps, mapDispatchToProps)(FormEdit);

Upvotes: 2

Related Questions