reactjs - Check state from imported component -


much of basic question. can pass state property component? if create login app , after successful login api call set state of loggedinuser: 12345 in component called login.js

export default class login extends component {      constructor(props) {         super(props);         this.state = {             data:[],             loggedinuser: 12345         }     }      render(){          return(             //return this.state.loggedinuser         )      } } 

how can pass this.state.loggedinuser login.js component i've imported login.js?

for example, in page1.js have import login './login'

can achieved? want pass this.state.loggedinuser value page imported.

thanks.

as mentioned in comment above, redux best practice here. here example of accomplishing vanilla react.

export default class parent extends component {   constructor(props) {     super(props)      this.state = {       logginuser: undefined     }      this.handleuserstate = this.handleuserstate.bind(this);   }    handleuserstate = (userinfo) => {     this.setstate({logginuser: userinfo})   }    render = () => {     return (       <div>         <login handleuserstate={this.handleuserstate} />        </div>     )   } }  export default class login extends component {    constructor(props) {     super(props);      this.loginuser = this.loginuser.bind(this);   }    loginuser = (e) => {     e.preventdefault()       <--- make call api userinfo here , pass call below --->      this.props.handleuserstate(userinfo)   }    render =() => {      return(         <div>           <button type="submit" onclick={this.loginuser} />         </div>       )   } } 

basically what's happening here since importing login component, have 'parent' component act state manager , save user data @ level. pass function updates state login component , call once have user data update with.

i hope helps!


Comments

Popular posts from this blog

angular - DownloadURL return null in below code -

meteor - inserting data to database gives error "insert failed: Method '/texts/insert' not found" -