I have multiple modals for signing up, and having trouble with it. I have three actions in total. First the register button which then activates the first register modal to either sign up with google or facebook, then after that completes the modal for additional information which could not be gathered by the provider will appear with pre-filled inputs gathered form provider. I render the two modals when I render the application and only show it when the register button is clicked. I need the componentDidMount to be called after I complete the facebook or google login, but it was called when I rendered the modals when the app fist started. The buttons hit action reducers and reducers changing the state of type bool on wether to show the modal or not.

class HeaderRegisterButton extends Component {
   render() {
     return(
       <div>
         <Register1/>
         <Register2/>
       </div>
     );
   }
 }

Register Modal 1

class Register1 extends Component {
   render() {
     return(
       <div>
        <button onClick={() => this.props.showRegister2()} /> //This would hit the action reducer to get initial info and change the bool to show register 1 to false and register 2 to true.
       </div>
     );
   }
 }

Register Modal 2

import { reduxForm, Field, initialize } from 'redux-form';

class Register2 extends Component {

  componentDidMount() {
    hInitalize() //only called when the app fires, not when the state changes in the action reducer to change bool to show this modal.
  }

  hInitalize() {
   var initData = {};
  const initData = {
   "name" = this.props.name//name stored inside redux store
  };
  this.props.initialize(initData)
  }



   render() {
     return(
       <div> 
        //Code to display the modal which works.
       </div>
     );
   }
 }

componentDidMount is only called once in the lifecycle of any component, re-render will not reinitialize the component. componentDidUpdate will be called where you can manage your logic.

26 users liked answer #0dislike answer #026
Gurdev Singh profile pic
Gurdev Singh

componentDidMount will execute only once, when React component mounted and it doesn't execut when state or props changed.

therefore you need to use componentDidUpdate and don't forget to compare props or state ( you can also use it when props changed in parent's component )

  componentDidUpdate(prevProps,prevState) {
      if (this.state.userID !== prevState.userID) {
      console.log('userId changed');
   }
 }

important : DON'T update state in componentDidUpdate without wrappe it in a condition because that triggers re-render and you'll cause an infinite loop

14 users liked answer #1dislike answer #114
Ali Mohammad profile pic
Ali Mohammad

IMO you don't need componentDidMount to be called, simply provide some callbacks to a parent component that holds some temporary state of all the information needed/gathered during the process. Each of your modals will display information given to them by this parent component.

The process would be something like this.

  1. Register Button Clicked
  2. Display choice between Google and Facebook
  3. User Clicks Google or Facebook
  4. Perform Authentication via Social Media Account
  5. Data from authentication sent back to parent component to be stored temporarily
  6. Secondary Registration form displayed with data given to it from parent component
  7. User fills out secondary form
  8. Submit button clicked
  9. Use data from temporary state in parent component for actions

Hope that makes sense :)

UPDATE:

Well I don't know how your implementation is... but you can pass functions into child components (via props) and use them in the child to communicate with the parent, so in the component that does the Facebook authentication have the parent pass someCallback that accepts the parameters shown below and adds them to the parents state (remember a change in state will cause any components who use that state to update). I have done this by passing fbLoginCallback as the callback for my facebook login process which calls Facebook's FB.getLoginStatus(....)

export class FbLoginButton extends Component {
    constructor(props) {
        super(props);
    }
    fbLoginCallback = response => {
        const { authResponse, status } = response;
        if (status === 'connected') {
            // Logged into your app and Facebook.
            const userId = authResponse.userID;
            const accessToken = authResponse.accessToken;

            FB.api('/me', user => {
                const displayName = user.name;

                this.props.someCallback(userId, accessToken, displayName);
            });
        }
    }
}

I've removed the rendering of the of the actual button and few other small things, but that's more or less how the callback should go.

2 users liked answer #2dislike answer #22
Tyler profile pic
Tyler

componentDidMount is a lifecycle method that is called only when the component is mounted. It is called only once after the first render.

1 users liked answer #3dislike answer #31
TopW3 profile pic
TopW3

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).