ReactNative - render a collection of children using array error when rendering userInfo in FBSDK?

0
votes

I am trying to build facebook signIN in functional component and facing below error: ERROR - Objects are not valid as a React child (found: object with keys {data}). If you meant to render a collection of children, use an array instead.

Following is code snippet:
import React, { Fragment, useEffect, useState } from 'react'; import {SafeAreaView, ScrollView, StatusBar, StyleSheet,Text, TouchableOpacity, View,Image,Button} from 'react-native'; import { AccessToken, LoginButton } from 'react-native-fbsdk';

   const App = () => {
   const [loggedIn, setLoggedIn] = useState(false);
   const [fbUserInfo, setFbUserInfo] = useState({data: ''});

   return (
           <Fragment>
           <StatusBar barStyle="dark-content" />
           <SafeAreaView>
           <ScrollView  contentInsetAdjustmentBehavior="automatic"
    style={styles.scrollView}>
    <View style={styles.body}>
      <View style={styles.sectionContainer}>
        <LoginButton
          onLoginFinished={(error, result) => {
            if (error) {
              console.log('login has error: ' + result.error);
            } else if (result.isCancelled) {
              console.log('login is cancelled.');
            } else {
              console.log(result);
              AccessToken.getCurrentAccessToken().then((data) => {
                //setLoggedIn(true);
                setFbUserInfo(data.userID);
                console.log("Login", data, data.accessToken.toString());
              });
            }
          }}
          onLogoutFinished={() => {
           //setLoggedIn(false);
           setFbUserInfo({data:''});
          }}
        />
      </View>
      <View style={styles.buttonContainer}>
        {!loggedIn && (
          <Text>You are currently logged out</Text>
        )}
      </View>
      {(
        <View>
          <View style={styles.listHeader}>
            <Text>User Info</Text>
          </View>
          <View style={styles.detailContainer}>
            <Text style={styles.title}>ID</Text>
            <Text style={styles.message}>{fbUserInfo}</Text>
          </View>
        </View>
      )}
      </View>
       </ScrollView>
      </SafeAreaView>
       </Fragment>
     );
    };


    export default App;

Please help me to resolve an issue, thanks

2
reactjsreact-nativereact-reduxcomponentsreact-functional-component

2 Answers

1
votes

Try this

AccessToken.getCurrentAccessToken().then((data) => {
   const { accessToken } = data;

fetch('https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=' + accessToken)
  .then((response) => response.json())
  .then((json) => {
    // Some user object has been set up somewhere, build that user here
    const userID = json.id;
    
    //setLoggedIn(true);
    setFbUserInfo({data: userID});
  })
  .catch(() => {
    reject('ERROR GETTING DATA FROM FACEBOOK')
  });
});
0
votes

I resolved it by using this;

 const [fbUserInfo, setFbUserInfo] = useState('');

 onLogoutFinished={() => {
               setLoggedIn(false);
               setFbUserInfo('');
              }}