0

I have 2 component parent(LoginScreen) and a child(SignupSection). Child component have onClick button. When user click button I need to fire function from the parent component and this is not working for me. I have the following code

I want Call parent function from Child component

Parent

import React, {Component} from 'react';
import Wallpaper from './Wallpaper';
import SignupSection from './SignupSection';

export default class LoginScreen extends Component {
   constructor(props) {
     super(props)
   }

   childcall()
   {
     alert("hello , this call from child component");
   }

   render() {
     return (
      <Wallpaper>
      <SignupSection 
        childcall ={this.childcall.bind(this)} 
      />
      </Wallpaper>
      );
    }
   }

Child

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View, Text} from 'react-native';


export default class SignupSection extends Component {
    constructor(props) {
       super(props)
    }
    componentWillMount()
    {

    }

    render() {
       return (
          <View style={styles.container}>
            <Text style={styles.text}  onClick={()=>this.props.childcall()}>Create Account</Text>
           <Text style={styles.text}>Forgot Password?</Text>
          </View>
       );
    }
 }
Amer Bearat
  • 876
  • 2
  • 7
  • 25
  • Possible duplicate of [Call child function from parent component in React Native](https://stackoverflow.com/questions/40307610/call-child-function-from-parent-component-in-react-native) – errorau May 03 '19 at 03:04
  • @errorau I want the opposite way I want Call parent function from Child component in React Native – Amer Bearat May 03 '19 at 03:07

1 Answers1

0

Text does not have onClick. There is only onPress or you should wrap your text component inside TouchableOpacity and then call your callback inside onPress

Fix : 

return (
         <View style={styles.container}>
            <Text style={styles.text}  onPress={()=>this.props.childCall()}>Create Account</Text>
           <Text style={styles.text}>Forgot Password?</Text>
          </View>
       );
Vivek_Neel
  • 1,343
  • 1
  • 14
  • 25