How to render React Component as function return

Question

Im trying to render react native component as function return, without sucesses, here is the code:

// In App.js in a new project

import * as React from 'react';
import { View, Text, TouchableOpacity, Linking, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
import { FacebookSocialButton, GoogleSocialButton } from "react-native-social-buttons";
import { AuthRequest, useAuthRequest } from 'expo-auth-session';


class MainClass extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

    }
    WebBrowser.maybeCompleteAuthSession();
    Stack = createStackNavigator();
    () => App(() => renderRoutes());
  }

  setResponse = (response) => {
    this.setState({response:response}).then(Alert.alert(this.state.response));
  }


  LoginGoogle = () => {
    const [request, response, promptAsync] = Google.useAuthRequest({
      androidClientId: 'xxxxxxx.apps.googleusercontent.com',
      expoClientId: 'xxxxxxxx.apps.googleusercontent.com'
    });
    
    React.useEffect(() => {
      if (response?.type === 'success') {
        const { authentication } = response;
        }
    }, [response]);

    return (
      <GoogleSocialButton disabled={!request} onPress={() => {promptAsync().then(() => {const [request, response, promptAsync] = useAuthRequest({}, {setResponse(response){}})})}} />
    ) 
  }



  LoginScreen = (LoginGoogle) => {
    const nav = this.props.navigation;

    return (
      <View style={{ flex: 1, backgroundColor: "#a2eff5"}}>
        <View style={{flex: 0.15}}></View>
        <View style={{flex: 0.1, backgroundColor: "white", borderRadius: 100/2, alignItems: "center", justifyContent: "center"}}>
          <Text style={{color: "black"}}>Please, Login using buttons below!</Text>
        </View>
        <View style={{flex: 0.2}}></View>
        <View style={{alignItems:"center", justifyContent: "center"}}>
          {LoginGoogle()}
        </View>
        <View style={{flex: 0.05}}></View>
        <View style={{alignItems:"center", justifyContent: "center"}}>
          <FacebookSocialButton onPress={() => {}} />
        </View>
      </View>
    );
  }

  

  MainScreen = () => {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }

  renderRoutes = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator 
        initialRouteName={"Login"}
        screenOptions={{headerShown: false}}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Main" component={MainScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  
}

App = (RenderComponent) => {
  return (
    {RenderComponent}
  );
}

export default App;

And here is the error im getting: Objects are not valid as React child (found: object with keys {RenderComponent}) If you meant to render a collection of children, use an array instead

Anyone know how this should be done?

also you have components written as class properties... this mix of syntaxes is going to present learning challenges. I would write your logic inside App and remove MainClass. if you're going to use hooks here, stick with that style while you're learning — azium
– azium, Commented Apr 6, 2021 at 17:51
well in any case. this is not valid syntax {RenderComponent}. you probably want <>{RenderComponent}</> at the very least. beyond that it's almost certainly a function so it would be <RenderComponent /> or <>{RenderComponent()}</> — azium
– azium, Commented Apr 6, 2021 at 19:20
When i try to <>{RenderComponent()}</> it says that RenderComponent is not a function, its an instance of Object — Jacs
– Jacs, Commented Apr 6, 2021 at 19:32

windowsill · Accepted Answer · 2021-04-06 18:09:38Z

1

The commenters are correct, you are trying to use a hook as a class method in a class component, it's not going to work. Additionally, hooks shouldn't return components. You can easily keep all your logic with a bit or rearranging, move the hook out of the class into a hook, then consume it in a functional component.

const useLoginGoogle = () => {
  const [request, response, promptAsync] = Google.useAuthRequest({
    androidClientId: 'xxxxxxx.apps.googleusercontent.com',
    expoClientId: 'xxxxxxxx.apps.googleusercontent.com'
  });

  React.useEffect(() => {
    if (response?.type === 'success') {
      const { authentication } = response;
    }
  }, [response]);

  return {promptAsync, disbaled: !request};
};

const LoginGoogle = () => {
  const { promptAsync, disbaled } = useLoginGoogle();
  return (
    <GoogleSocialButton disabled={disbaled} onPress={() => { promptAsync().then(() => { const [request, response, promptAsync] = useAuthRequest({}, { setResponse(response) { } }) }) }} />
  );
};

// Then wherever you want your button
<LoginGoogle />

answered Apr 6, 2021 at 18:09

windowsill

3,6491 gold badge11 silver badges15 bronze badges

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

1 Comment

Jacs Over a year ago

you guys missing the point... the problem here is not with google social button... its with stack navigator...

Collectives™ on Stack Overflow

How to render React Component as function return

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related