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>
);
}
}
There is no call to ComponentDidMount. It is only called once after the initial render.
If the error occurs before componentDidMount gets called such as in your render function, you won't see the console log. Try commenting out the code in your render function and see if it appears. Show activity on this post. In my case, I imported a component without the export default command in the imported file.
You shouldn't try to trigger componentDidMount on click because componentDidMount is executed only once in the lifecycle of the component, immediately after a component is mounted. You should change onBtNext() function to fetch the data.
The componentDidMount() method is called after the component is rendered. This is where you run statements that requires that the component is already placed in the DOM.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With