this.props.onGetLocation unidentified

[julgensio]

I was trying to log a function from the parent. And unfortunately I did not succeed. If tired to call the “getUserLocationHandler” with a props.

Current situation, the code succeed with the onPress Alert function.

App.js (parent)

import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";

import FetchLocation from "./components/FetchLocation";


export default class App extends React.Component {

  render() {
  getUserLocationHandler = () => {
    console.log("Pressed a button");
  };

    return (
      <View style={styles.container}>
        <FetchLocation onGetLocation={() => this.getUserLocationHandler()} />
      </View>
    );
  }
} 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Fetchlocation.js(child)

import React from 'react';
import { Button, Alert} from 'react-native';



const fetchLocation = props => {

	return (
		<Button 
			title = "Get Locaction "
			onPress = { () => {
    			Alert.alert('Working');
  			}}
		/>
	);
};

export default fetchLocation;

And if i want to change the onPress function with this code(FetchLocation.js):

import { Button, Alert} from 'react-native';



const fetchLocation = props => {

	return (
		<Button 
			title = "Get Locaction "
			onPress = {() => this.props.onGetLocation()}
		/>
	);
};

export default fetchLocation;

Current output In this error it says that undefined is not an object. But i didn’t see that i created an object.

Desired situation
To log “Pressed a button” in the console from EXPO

Thank you very much!

[jimmylee]

Hiya! It looks like in your code your handler is inside of the render method, you should have it like this:

  getUserLocationHandler = () => {
    console.log("Pressed a button");
  };

  render() {
    return (
      <View style={styles.container}>
        <FetchLocation onGetLocation={() => this.getUserLocationHandler()} />
      </View>
    );
  }

Let me know if that resolves your issue with testing, if not I’m happy to help more!

[julgensio]

Hey, Thanks for the reply

I moved the getUserLocation outside the render. But i still didn’t succeed to get a “pressed a button” log. The props of FechtLocation is still undefined. I did succeed to log the function from the App.js like this.

import React from 'react';
import { Button, Alert} from 'react-native';


export default class fetchLocation extends React.Component {

	render(){
		return (
			<Button 
				title = "Get Locaction "
				onPress = {console.log("test", this.props)}
			/>
		);
	}
};

Log output

Undefined props This wil log “undefined”

import React from 'react';
import { Button, Alert} from 'react-native';



const fetchLocation = props => {
	return (
		<Button 
			title = "Get Locaction "
			onPress = {console.log(this.props)}
		/>
	);
};

export default fetchLocation;

I don’t understand it

[julgensio]

Update
*
I was able to fix it

the problem was that i needed to change the onPress = {console.log(this.props)} to onPress = { () => props.onGetLocation()}

Thanks for the help!