how can I use facebook SDK in react

I’m currently using react, and by using react-facebook-rogin Library, I successfully made facebook login. However, there is no function for logout!.

So I decided to use facebook SDK, however I don’t know how to use javascript code in react.

according to facebook official document, I need to write following code in HTML.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v11.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

And after, this is the code for log out

FB.logout(function(response) {
  // user is now logged out
});

And this is the code that I used react-facebook-rogin Library.

import React from "react";
import Navbar from './components/Navbar';
import { BrowserRouter as Switch, Route } from 'react-router-dom'
import './components/Navbar.css';
import './App.css';
import MainStructure from "./pages/MainStructure";
import Study from "./pages/Study"
import FacebookLogin from 'react-facebook-login'
import { useState } from "react";

function App() {
  
  const responseFacebook = (response) => {
    console.log(response);
    setIsLoggedin(true)
  }

  const [isLoggedin, setIsLoggedin] = useState(false);

  return (

    isLoggedin ?
      (<div>

        <Route path='/' >
          <Navbar/>
        </Route>


        <Route exact path='/' >
          <MainStructure/>
        </Route>

        <Route path='/study'>
          <Study/>
        </Route>
      </div>) 
      :
      (
        <div className="">
          <div className="facebookLogin">
            <FacebookLogin
              appId="145617534309548"
              autoLoad={true}
              fields="name,email,picture"
              //onClick={componentClicked}
              callback={responseFacebook} />
          </div>
        </div>)


  );
}

export default App;

How can I use javascript code in react code?

Answer

I would not use a library that is 3 years old for this, but you could try using “window.FB.logout” or “FB.logout” on click. Either way, instead of that old dependency, you could just load the JS SDK on your own. Here is an example how that could work (untested):

const SomeComponent = () => {
    const [isLoggedin, setIsLoggedin] = useState(false);

    const onLoginClick = () => {
        window.FB.login(...);
    };

    useEffect(() => {
        window.fbAsyncInit = () => {
            window.FB.init({
                appId            : 'your-app-id',
                autoLogAppEvents : true,
                xfbml            : true,
                version          : 'v11.0'
            });
        };
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    }, []);

    return (
        <div><button onClick={onLoginClick}>Login with Facebook</button></div>
    );
};

This should be a component that is only loaded once – a root component that is always there, for example.

In that case, you can use FB.logout() as well, of course.