CODEWITHSUNDEEP
functionreactjscomponents
Jordan Duncan
Jordan Duncan

Reputation: 456

react native pass function to child component as a prop (this.props.functionName is not a function)

I've seen this question a lot of other places too, but for some reason no matter what i do, binding or declaring differently, i keep receiving the same error that _this3.props.toggleProp() is not a function. (In '_this3.props.toggleProp()', '_this3.props.toggleProp is undefined.)

my parent component is:

      constructor (props) {
    super(props)
    this.state = {
      selectedTab: 'home',
      notificationNumber: -1,
    }
    this._toggleScreen = this._toggleScreen.bind(this);
    this.toggleSchedule = this.toggleSchedule.bind(this);

  }

  _toggleScreen() {
      this.setState({
        selectedTab: 'categories',
      })
  }

  render(): React$Element<any> {    
    function MainContent(props) {
      const selectedTab = props.selectedTab;
      if (selectedTab === 'home') {
        return <Home toggleProp={this._toggleScreen} grain="this one here"/>;
      }
      if (selectedTab === 'categories') {
        return <Categories toggleScreen={this.toggleScreen} />;
      }

      return <Schedule />;
    }
    return (
      <View style={styles.container}>
          <MainContent selectedTab={this.state.selectedTab} style={styles.content}/>
      </View>
    );
  }
}

and the important part of my child component is:

  render(): React$Element<any> {
return (
      <Icon.Button name="home" backgroundColor="rgba(0,0,0,0)" onPress={()=>{this.props.toggleProp()}}>
      </Icon.Button>

i have constructor (props) { super(props)

at the top. any ideas what's going on?

Upvotes: 0

Views: 2790

Answers (3)

mhottman
mhottman

Reputation: 11

The function in your parent component is _toggleScreen() {}, however you're passing in this.toggleScreen instead of this._toggleScreen into your Categories component. This is part of what is causing the toggleProp() is not a function error.

if (selectedTab === 'categories') {
  return <Categories toggleScreen={this._toggleScreen} />;
}

Additionally, you're using toggleProp as the prop in the <Home /> Component, but are using toggleScreen as the prop in your Categories component, so this would also throw a toggleProp is undefined error.

A working render function should look like this: 

render(): React$Element<any> {    
    function MainContent(props) {
      const selectedTab = props.selectedTab;
      if (selectedTab === 'home') {
        return <Home toggleProp={this._toggleScreen} grain="this one here"/>;
      }
      if (selectedTab === 'categories') {
        return <Categories toggleProp={this._toggleScreen} />;
      }

      return <Schedule />;
    }
    return (
      <View style={styles.container}>
          <MainContent selectedTab={this.state.selectedTab} style={styles.content}/>
      </View>
    );
  }

Upvotes: 1

Jordan Duncan
Jordan Duncan

Reputation: 456

I actually needed to pass the function down two children, I totally forgot that I'm rendering the content in MainContent, so I need to pass the toggleScreen as a prop in the mainContent, then pass this.prop._toggleScreen to the home component then call it in there as a prop again.

    handler(e) {
  this.setState({
    selectedTab: 'categories',
  })
}

  render(): React$Element<any> {    
    function MainContent(props) {
      const selectedTab = props.selectedTab;
      if (selectedTab === 'home') {
        return <Home handler={props.handler} grain={props.selectedTab} />;
      }
      else if (selectedTab === 'categories') {
        return <Categories toggleScreen={this.toggleScreen} />;
      }

      return <Schedule />;
    }

    return (
      <View style={styles.container}>
          <MainContent selectedTab={this.state.selectedTab} style={styles.content} handler={this.handler}/>
      </View>
    );
  }
}

Upvotes: 0

Andrei Calazans
Andrei Calazans

Reputation: 513

onPress is not a react SyntheticEvent https://facebook.github.io/react/docs/events.html

change onPress for onClick and it should work. here is a codesand with onClick working just fine. https://codesandbox.io/s/93ZyOWl8

Upvotes: 1

Related Questions