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.
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
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.
Register Button Clicked
Display choice between Google and Facebook
User Clicks Google or Facebook
Perform Authentication via Social Media Account
Data from authentication sent back to parent component to be stored temporarily
Secondary Registration form displayed with data given to it from parent component
User fills out secondary form
Submit button clicked
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.
componentDidMount is a lifecycle method that is called only when the component is mounted. It is called only once after the first render.
Related
Overview
We have a page with a header (Blue color) and content section (Green color) that can be seen in image below. The requirement is when a user selects a year in header, then the content page will show data as per the selected year.
What is happening right now Technically
When user selects a year in header, we dispatch the selected value and the active container's mapStateToProps function is triggered and the selected year is passed to the component.
class Page1Content extends Component {
}
function mapStateToProps(state) {
return { selectedYear : state.userSelectedValue };
}
export default connect(mapStateToProps, null)(Page1Content);
Question 1
How will data on Page1Content will refresh? Few approaches:
In ComponentDidUpdate react life cycle method of the Page1Content API to fetch data can be called. However have seen opinions where we should avoid React hooks and life cycle methods with Redux.
In mapStateToProps function API can be called.
Can any one suggest what is the better place to call the API?
Question 2
Data on Page1Content will be used only by this page. This data will not be used by any other component and hence need not be shared by any other Component. Now question 2 is
In case we decide to use ComponentDidUpdate should we again dispatch the API call using Thunk or any other library and then catch the response in mapStatesToProps again?
Or we should make the API call and resolve it in the component itself as a promise. Then the response will be set in State and respective Template will be refreshed.
ComponentDidUpdate is a lifecycle method not a hook. Hooks is functionality that allows functional components to have class based functionality such as state.
You are using a class based component in your example so you are not using hooks.
https://reactjs.org/docs/hooks-intro.html
Yes Redux shouldnt be used with hooks since context is a better option.
You can lift state up so to speak and update the local state in the parent component getting rid of redux completely.
Just pass down the setState function and the state itself to the appropriate children.
class App extends Component {
constructor(props) {
super(props);
this.state = {
some_prop: false
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({some_prop: true})
console.log('Click happened');
}
render() {
return (
<Header onClick={this.handleClick } />
<Page1Component props={this.state.some_prop} />
}
}
Edit:
Question 1
How will data on Page1Content will refresh?
best option is with a ternary expression in your render method, there is no need to check if the state updated. In react if the state is changed your component will automatically re render.
render() {
return (
<div>
{this.props.selectedYear
? <p> {this.props.selectedYear}</p>
: null
}
</div>
}
}
Question 2
Data on Page1Content will be used only by this page. This data will not be used by any other component and hence need not be shared by any other Component. Now question 2 is
If I understand this correctly you will need to use an action creators, redux thunk is overkill here.
class Header extends Component {
constructor(props) {
super(props);
}
handleClick() {
this.props.dispatchActionCreator({some_value})
console.log('Click happened');
}
render() {
return (
<button onClick={(some_value) => this.handleClick(some_value)}>Click </button>
}
}
function mapDispatchToProps(state) {
return {
dispatchActioNCreator: (some_value) => dispatch(ACTIONS.action_creator(some_value) };
}
This will save your value from your header to the global redux state and then you can just access with mapStateToProps in your Page1Component.
I made some app to get asynchronously data from remote server.
The app just parent component - to get data, and two child components.
One child component for display asynchronous data.
Other child for filter functionality. Just input string where user typing and data in first component display appropriate items.
There are a lot code with console.log everywhere, but in simple scheme it:
class App extends Component {
state = {isLoading:true, query:''}
getData = (location) => {
axios.get(endPoint).then(response=>{ response.map((item) => { places.push(item)})
// ***** first setState
this.setState({isLoading:false})
})
}
updateQuery = (e) => {
// ***** second setState
this.setState({query:e.target.value.trim()})
}
componentDidMount(){
this.getData(location)
}
render() {
if (!this.state.isLoading){
if (this.state.query){
const match = new RegExp(escapeRegExp(this.state.query),'i')
searchTitles = places.filter(function(item){return match.test(item.name)})
}else{
searchTitles = places.slice();
}
}
return (
<div className="App">
<input type='text' onChange={this.updateQuery} value={this.state.query}/>
<List places = {searchTitles}/>
</div>
);
}
}
export default App;
When state change in case of using everything is OK - content refreshed in next child component.
But child component that display data - some items not full of content... no photos and some text information. So probably its rendered before getting remote data.
But why its not re-render it after state.isLoad toggled to 'false' (in code - after got response) ?
I put among code console.log to track processes ... and weird things: state.isLoad switched to false before some part of data came from server. (((
I dont use ShouldComponentUpdate() inside child component.
Per React's documentation for setState
setState() will always lead to a re-render unless
shouldComponentUpdate() returns false.
As mentioned, one way to avoid a re-render is shouldComponentUpdate returning false (shouldComponentUpdate takes in nextProps and nextState) but it's not clear why someone would trigger a state change with setState and then nullify that state change with shouldComponentUpdate.
Is it possible to apply logic to a component before navigating to a different route?
For example, my component looks something like this:
class Example extends React.Component {
//Handles logic for when user leaves page
handlePageExit = () => {
console.log("Leaving page...");
}
//Set onBeforeUnload event listener so handlePageExit function is called when user closes or refreshes page
componentDidMount = () => {
window.addEventListener("onbeforeunload", this.handlePageExit);
}
//This hook is called when page exits or is refreshed
//It will remove event listener when
//However, it wont be called when user changes to a new route
componentWillMount = () => {
window.removeEventListener("onbeforeunload", this.handlePageExit)
}
//There's no react life cycle hook I can use to call HandlePageLogic when user navigates to a new route to remove event listener or apply other logic...
render(){
return(
<div /> //Not relevant to question
)
}
}
I'm trying to apply logic such as removing event listeners before the page is navigated to the new route.
I've tried using life cycle methods such as componentWillReceiveProps, componentWillUnmount, and componentShouldUpdate to insert logic before the component is unmounted however they don't seem to be invoked when navigating to a new page.
Does anyone know where or how I can insert logic in between a route change in react-router v4?
Thank you.
Yes, it is.
You need to add a change listener to you react router history object.
To do this add in your componentDidMount that has the history prop:
componentDidMount() {
this.props.history.listen(this.onRouteChange.bind(this));
}
onRouteChange(route) {
//route.pathname = Your next route
//Handle what you need to do here
//if you need to redirect you can do this
this.props.history.replace({pathname: '/desiredRoute'});
}
I have CompetitionSection which repeats all the competitions from database. When user clicks on one, it redirects him to a Competition Page, loads for a second and renders the page with all the details in it. So far, so good.
But when users goes back to the Competition Section and then click on the second competition, it instantly loads up the previous competition, 0 loading time.
From my point of view, what is failing is that the props of the component are not updating when I render the component (from the second time). Is not a router problem, which was my first instinct because I'm seeing the route.params changing acordingly, but the actions I dispatch to change the props are not dispatching. Here's a bit of code of said component.
class CompetitionPage extends React.Component {
componentWillMount() {
let id = getIdByName(this.props.params.shortname)
this.props.dispatch(getCompAction(id));
this.props.dispatch(getCompMatches(id));
this.props.dispatch(getCompParticipants(id));
this.props.dispatch(getCompBracket(id));
}
render() {
let { comp, compMatches, compBracket, compParticipants } = this.props
...
I tried every lifecycle method I know. component Will/Did Mount, component Will/Did update and I even set shouldUpdate to true and didn't do the trick. As I understand, the problem will be solved with a lifecycle method to dispatch the actions everytime an user enters Competition Page and not just for the first time. I'm running out of options here, so any help will be appreciated.
NOTE: I'm a newbie at React/Redux so I KNOW there are a couple of things there are anti-pattern/poorly done.
UPDATE: Added CompetitionsSection
class CompetitionsSection extends React.Component {
render() {
const {competitions} = this.props;
return (
...
{ Object.keys(competitions).map(function(comp, i) {
return (
<div key={i} className={competitions[comp].status ===
undefined? 'hide-it':'col-xs-12 col-md-6'}>
...
<Link to={"/competitions/"+competitions[comp].shortName}>
<RaisedButton label="Ver Torneo" primary={true} />
</Link>
...
It helps to better understand the lifecycle hooks. Mounting a component is when it is placed on the DOM. That can only happen once until it is removed from the DOM. An UPDATE occurs when new props are passed or setState is called. There are a few methods to troubleshoot when updates are not happening when you think they should:
Ensure that you are changing state in componentDidMount or componentDidUpdate. You cannot trigger an update in componentWillMount.
Make sure that the new props or state are completely new objects. If you are passing an object down in props and you are just mutating the object, it will not trigger an update. For instance, this would not trigger a update:
class CompetitionPage extends React.Component {
constructor(props) {
super(props)
this.state = {
competitions: [ compA, compB ]
}
}
triggerUpdate() {
this.setState({
competitions: competitions.push(compC)
})
}
componentDidMount() {
triggerUpdate()
}
render() {
return(
<div>
Hello
</div>
)
}
This is due to the fact that a new competition is being appended to the array in state. The correct way is to completly create a new state object and change what needs to be changed:
const newCompetitions = this.state.competitions.concat(compC)
this.setState(Object.assign({}, this.state, { competitions: newCompetitions }))
Use ComponentWillRecieveProps on an update to compare previous and current prop values. You can setState here if clean up needs to be done:
Read more about this method in the React documentation:
https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops
I'm working on a project using react and I have a sign up modal and a login modal that are both separate components and I want to have two links ate the top of each modal to be able to switch from the sign up model to the login model. Each component model has a function open that looks like this:
open() {
this.setState({ showModal: true });
}
Is there a way for a component to call a function and set States from another component or do I need to make both models one component somehow?
The best way to handle communication between components is through a state container for the application that all components "hook in to".
Here's a very simple illustration:
// this state is defined somewhere in your application
// all of your components "hook in to" this state by including
// the values you want as props. For example,
// <MyFancyComponent value={state.value1} />
// and now MyFancyComponent has access to value1
state = {
value1: 42,
showModal1: false,
showModal2: false,
};
// somewhere in your application, there's a render method
// that looks like this
render() {
return (
<div>
{this.props.showModal1 ? <Modal1 /> : null}
{this.props.showModal2 ? <Modal2 /> : null}
{/* now render the rest of your component */}
</div>
);
}
The basic idea is that when this component (the one with the render method above) needs to show Modal1 or Modal2, it changes the appropriate flag in the state, which are mapped to the showModal* props on the component. Then the component re-renders and includes the appropriate modal. If you want to trigger a modal from another component, you change the appropriate flag in your application state & React will go to work re-rendering and show the modal.
The example above is ridiculously incomplete - it's intended to illustrate the basic idea only. To make this work, you'll need to implement a state container for your application. For that, I'd recommend either the flux pattern or redux.
Now, you could implement this as a set of callbacks & properties that are specific to the components you're working with, but I recommend against that - it becomes very difficult to manage, very quickly. Plus, it does not scale - to add a component, you would have to "wire it up" to all your other components manually.
In the component where you are rendering each of these login modals, you would want to pass in values through the props of each component. In the modal components, you would then use the value of the property passed in to determine if the modal should be shown.
Here's a quick example of how it could work (theoretically -- haven't tested):
Login/Signup Modal
import React from 'react';
const LoginModal = React.createClass({
propTypes: {
isVisible: React.PropTypes.boolean.isRequired,
onLogin: React.PropTypes.function,
},
componentWillReceiveProps(nextProps) {
// Will allow parent components to pass in a boolean
// telling this component when to render
this.setState({
showModal: nextProps.isVisible,
});
},
onSubmit() {
// TODO: Handle login
// If we let the parent handle the visibility, we just call
// the onLogin callback passed in and don't set this.state.showModal
this.props.onLogin();
},
render() {
return (
// Use this.state.showModal boolean to show/hide
// your login modal
);
},
});
export default LoginModal;
Parent Component
import React from 'react';
import LoginModal from './LoginModal';
const ParentComponent = React.createClass({
showLoginModal() {
this.setState({
showLogin: true,
});
},
hideLoginModal() {
this.setState({
showLogin: false,
});
// TODO: Likely change the route or do something else here...
},
render() {
return (
<button onClick={this.showLoginModal}>Login</button>
<LoginModal isVisible={this.state.showLogin} onLogin={this.hideLoginModal} />
);
},
});