Untitled

<html>
<head>
<title>counter</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script>
</head>
<body>
<!--
Effects may also optionally specify how to “clean up” after them by returning a function.
For example, this component uses an effect to subscribe to a friend’s online status, 
and cleans up by unsubscribing from it.

In this example, React would unsubscribe from our ChatAPI when the component unmounts,
as well as before re-running the effect due to a subsequent render. (If you want, 
there’s a way to tell React to skip re-subscribing if the props.friend.id we passed
to ChatAPI didn’t change.-->

<div id="mydiv"></div>
<script type="text/babel">

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

const container=document.getElementById("mydiv");
const root =ReactDOM.createRoot(container);
root.render(<FriendStatus/>);
</script>
</body>
</html>
Editor is loading...