CODEWITHSUNDEEP
javascriptreactjsreact-native
HelloWorld
HelloWorld

Reputation: 2330

React prop containing function is not defined

I want to pass a function down to a child component - should be really simple. Here is my render:

  render() {
    const responses = this.state.responses;
    return (
      <View style={styles.container}>
        {
          responses
          ? <ScrollView style={{flex: 1}}>
              <Header />
                <Wrapper responses={responses} sendMessage={this.sendMessage}/>
              <Footer/>
            </ScrollView>
          : <Loading />
        }
      </View>
    );
  }

and here is my constructor where I bind the function to "this":

  constructor(props) {
    super(props);

    this.state = {
      "sensors": null,
      "responses": null
    };

    this.connectSockets = this.connectSockets.bind(this);
    this.sendMessage = this.sendMessage.bind(this)
  }

The function I want to pass looks like this:

  sendMessage(techPhoneNumber, dangerMessageForTech) {
    return SMS.text(techPhoneNumber, dangerMessageForTech);
  }

However, the child component is getting an empty object, and when I break on the "Wrapper" component and hover over "sendMessage" prop I see:

"message": "sendMessage is not defined"

When I hover over "responses" I see the data. I am not sure what I am missing here... help?

EDIT this has nothing to do with the SMS module because when I try to pass any other function down I get the same result... I am using react native but it should be the same no?

I am accessing sendMessage like so in Wrapper component:

export default Wrapper = ({responses}, sendMessage) => {
    //do stuff
}

Upvotes: 0

Views: 1590

Answers (6)

HelloWorld
HelloWorld

Reputation: 2330

I ended up just importing the SMS module into the component that needed it and calling it inside a function in the "onPress" prop and that solved the immediate issue. I will look into it further and maybe post a bounty If I cannot pass any functions down as props when deconstructing the "props" object correctly

Upvotes: 0

CodeYute
CodeYute

Reputation: 74

Try using arrow functions instead of bind

sendMessage = (techPhoneNumber, dangerMessageForTech) => {
return SMS.text(techPhoneNumber, dangerMessageForTech); }

and

<Wrapper responses={responses} sendMessage={this.sendMessage}/>

Upvotes: 0

Suman Kundu
Suman Kundu

Reputation: 1742

Ah, there is a problem with your code,

this is the correct way: 

export default Wrapper = ({responses, sendMessage}) => {
    //do stuff
}

the reason behind this is your wrapper component is getting only one Object as its argument with sendMessage and responses as its properties.

Another correct way will be:

export default Wrapper = (props) => {
    const {responses, sendMessage} = props; // or directly using props.responses and props.sendMessage
    //do stuff
}

Upvotes: 2

Vasi Anurag
Vasi Anurag

Reputation: 84

Change your Wrapper component to

> export default Wrapper=({responses,sendMessage}){

//Do stuff

}

Upvotes: 0

Olusola Omosola
Olusola Omosola

Reputation: 905

Based on your code, I think this is okay:

render() {
const responses = this.state.responses;
return (
  <View style={styles.container}>
    {
      responses
      ? <ScrollView style={{flex: 1}}>
          <Header />
            <Wrapper responses={responses} sendMessage={this.sendMessage}/>
          <Footer/>
        </ScrollView>
      : <Loading />
    }
  </View>
);
}

But I have corrected this

 constructor(props) {
super(props);

this.state = {
  "sensors": null,
  "responses": null
};

this.connectSockets = props.connectSockets.bind(this);
this.sendMessage = props.sendMessage.bind(this)
 }

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

It should be

export default Wrapper = ({responses, sendMessage}) => {
    //do stuff
}

OR:

Access it using props.

export default Wrapper = (props) => {
        //do stuff
        //props.responses, 
        //props.sendMessage()
    }

Upvotes: 1

Related Questions