Update parent component state with a function whose arguments rely on child component

Question

I know it seems like a duplicate from That question but it's not, I need to do something slightly different that's not working.

I'm implementing:

a componente <Page/> which has two child components:
- a <Greetings/> message.
- a <LoginButton/> button.

<Page/> has a {isLogged: false} state. <Greetings/> should display different messages when isLogged is true/false.

<LoginButton/> should have a login text when isLogged's false, logout otherwise, and implement a function that updates isLogged state from its parent component, <Page/>.

With this implementation, I'm willing to learn:

<Greetings/>: How to implement a child component whose props are binded to the parents component state (works)
<LoginButton/>: How to update parent's state from a child component, passing parent's setState for the child through its props (is not working).

Here's my source code:

import React from 'react';
import ReactDOM from 'react-dom';


class Greetings extends React.Component{
  render(){
    if(this.props.isLogged){
      return <p>You're logged. Welcome Back!</p>
    }
    return <p>You're not logged. Please Login</p>
  }
}

class LoginButton extends React.Component{
  login(){
    console.log(this.props)
    this.props.handler({isLogged: true})
  }

  logout(){
    this.props.handler({isLogged: false})
  }
  
  render(){
    if(this.props.isLogged){
      return <button onClick = {()=>{this.logout()}}>logout</button> 
    }
    return <button onClick = {()=>{this.login()}}>login</button>
  }
}

class Page extends React.Component{
  constructor(props){
    super(props)
    this.state = {isLogged: false}
  }

  handler(newState){
    this.setState(newState)
    console.log(this.state)
  }

  render(){
    return(
      <>
      <Greetings isLogged={this.state.isLogged}/>
      <LoginButton isLogged={this.state.isLogged} handler = {()=>this.handler}/>
      </>
    )
  }
}

const element = <Page/>
ReactDOM.render(element, document.getElementById('root'))

The main difference between my code and most of examples from the other StackOverflow question is that it's up to the child component, <LoginButton/>, to decide the arguments for calling this.render, which's causing me problems.

I believe there's something wrong on login() and logout() functions, but i'm not managing to discover what.

The page renders, but the button's not working. Please helpe me.

Muhammad Haseeb · Accepted Answer · 2021-02-18T12:31:39.920

This is because you are expecting and argument in your this.handle but not passing the value from the props. this should fix your problem.

class Page extends React.Component{
  constructor(props){
    super(props)
    this.state = {isLogged: false}
  }

  handler(newState){
    console.log(newState)
    this.setState(newState)
  }

  render(){
    return(
      <>
      <Greetings isLogged={this.state.isLogged}/>
      <LoginButton handler = {(newState) => this.handler(newState)}/>
      </>
    )
  }
}

Or you can aslo do it by binding your handler function and simply passing it to the child component as prop, rather than calling it.

class Pageextends React.Component{
  constructor(props){
    super(props)
    this.state = {isLogged: false}
    this.handler = this.handler.bind(this);
  }

  handler(newState){
    console.log(newState)
    this.setState(newState)
  }

  render(){
    return(
      <>
      <Greetings isLogged={this.state.isLogged}/>
      <LoginButton handler = {this.handler}/>
      </>
    )
  }
}

Thanks for that too! I prefer arrow functions over bindings but I see why some may prefer the other way — nluizsoliveira, Feb 18 '21 at 12:33

score 1 · Answer 2 · answered Feb 18 '21 at 12:33

You are providing arguments in this line

 this.props.handler({isLogged: true})

but not receiving in the handler prop passed to the LoginButton component The render method of Page component should be like:

 render(){
    return(
      <>
      <Greetings isLogged={this.state.isLogged}/>
      <LoginButton isLogged={this.state.isLogged} handler = {(newState)=>this.handler(newState)}/>
      </>
    )
  }

Update parent component state with a function whose arguments rely on child component

2 Answers2