how can use a function in props of react native?

Question

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.

Try <Loginfb ref={this.ref} login={this.login} /> in your container. — ThinhIT
– ThinhIT, Commented Aug 11, 2017 at 5:28

flaky · Accepted Answer · 2017-08-11 05:48:05Z

1

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.

answered Aug 11, 2017 at 5:48

flaky

7,4404 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hernan Humaña Over a year ago

In the child can be props.login.bind(this) ?

flaky Over a year ago

Did this work for you @HernanHumaña? Maybe you can approve the answer so others know it helped :) Cheers

Collectives™ on Stack Overflow

how can use a function in props of react native?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related