React Component in Callback Function not called and not throwing any error

Question

The Group component never gets called, but if I replace where it is called in the callback function with a console.log(response) , that gets called.

import React, { Component } from 'react';
import { FacebookLogin } from 'react-facebook-login-component';
import Group from './Groups'

class Login extends Component { 
   render () {

   return (
     <div>
       <FacebookLogin socialId="****************"
                   language="en_US"
                   scope="user_events,user_managed_groups"
                   responseHandler={response => <Group user={response}/>}
                   xfbml={true}
                   fields="id,email,name"
                   version="v2.5"
                   className="facebook-login"
                   buttonText="Login With Facebook"/>
      </div>
    );
  }

}

export default Login;

Answer 1

Your problem is that responseHandler prop is a callback function and not a render function, therefore it will be called once the user is logged in.

If you want to render a Group component, you should save the status at the component state, and then render the Group component conditionally.

Something like that:

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null
    };
  }

  handleFBResponse(response){
    this.setState({
      user: response
    });
  }

  render () {

    return (
      <div>
        <FacebookLogin socialId="****************"
                       language="en_US"
                       scope="user_events,user_managed_groups"
                       responseHandler={(response) => this.handleFBResponse(response)}
                       xfbml={true}
                       fields="id,email,name"
                       version="v2.5"
                       className="facebook-login"
                       buttonText="Login With Facebook"/>
        {this.state.user && <Group user={this.state.user}/>}
      </div>
    );
  }
}