We now have our data to pass to the ReactJS component we're going to create. First, let's start with the UserDetails component. This is going to show a link with the logged-in username and the source to this user Facebook page. First, remove our old logout anchor from the index.html file as this is not going to be necessary anymore. Our logout functionality will be moved to our ReactJS component instead. We'll also create another div, named user, above the main div; this new element will hold the UserDetails component. The changes in index.html should look like this:
<h1>Facebook User's list of likes</h1> <div id="user"></div> <div id="main"></div>
You can create the UserDetails ReactJS component at the bottom of the index.jsx file:
var UserDetails = React.createClass({
handleLogout: function () {
FB.logout(function () {
alert("You're logged out, refresh the page in order to login again.");
});
}
...