CODEWITHSUNDEEP
react-native
Hernan Humaña
Hernan Humaña

Reputation: 433

how can use a function in props of react native?

I need to pass a function on the props. I have this component:

import React, {Component} from 'react';
import { View } from 'react-native';
import {FBLogin, FBLoginManager} from 'react-native-facebook-login';

const Loginfb = (props) => (
        <FBLogin
        style={{marginBottom: 10}}
        ref={props.ref}
        permissions={["email", "user_friends"]}
        loginBehavior={FBLoginManager.LoginBehaviors.SystemAccount}
        onLogin={props.login}
);

export default Loginfb;

Where props.ref and props.login are functions with data. In my container component I have this:

import React, {Component} from 'react';
import {View} from 'react-native';
import {FBLogin, FBLoginManager} from 'react-native-facebook-login';
import Loginfb from '../components/fblogin';

class Inicio extends Component {

constructor(props) {
  super(props);
  this.state = {
    user: null,
  };
}

Ref = (fbLogin) => {
  this.fbLogin = fbLogin
}

login = (data) => {
  console.log("Logged in!");
  console.log(data);
  this.setState({user: data.credentials});
}

render() {
     return (
        <View
             <Loginfb
              ref={this.ref} 
              onLogin={this.login}/>
        </View>
              );
       }
}
export default Inicio;

I can't understand my error: "this.props[event] is not a function"

Please Help.

Upvotes: 1

Views: 638

Answers (1)

flaky
flaky

Reputation: 7404

Not quite sure, but I'm assuming the context is lost.

Either inline when you pass them to the child: myFunction.bind(this)

Or in the constructor of the container, like so:

this.myFunction = this.myFunction.bind(this)

Hope this helps.

Upvotes: 1

Related Questions