title: How do I use a utility function to detect OS and Browser in react?
body: <p>I'm attempting to use a utility function in order to detect the browser and the operating system on the login page in a react app. Here is the method that I'm attempting to export into the Login component:</p>
  <p>//utils/platform.js</p>
  <pre><code>function getOperatingSystem(window) {
    let operatingSystem = 'Not known';
    if (window.navigator.appVersion.indexOf('Win') !== -1) { operatingSystem = 'Windows OS'; }
    if (window.navigator.appVersion.indexOf('Mac') !== -1) { operatingSystem = 'MacOS'; }
    if (window.navigator.appVersion.indexOf('X11') !== -1) { operatingSystem = 'UNIX OS'; }
    if (window.navigator.appVersion.indexOf('Linux') !== -1) { operatingSystem = 'Linux OS'; }
  
    return operatingSystem;
  }
  
  function getBrowser(window) {
    let currentBrowser = 'Not known';
    if (window.navigator.userAgent.indexOf('Chrome') !== -1) { currentBrowser = 'Google Chrome'; }
    else if (window.navigator.userAgent.indexOf('Firefox') !== -1) { currentBrowser = 'Mozilla Firefox'; }
    else if (window.navigator.userAgent.indexOf('MSIE') !== -1) { currentBrowser = 'Internet Exployer'; }
    else if (window.navigator.userAgent.indexOf('Edge') !== -1) { currentBrowser = 'Edge'; }
    else if (window.navigator.userAgent.indexOf('Safari') !== -1) { currentBrowser = 'Safari'; }
    else if (window.navigator.userAgent.indexOf('Opera') !== -1) { currentBrowser = 'Opera'; }
    else if (window.navigator.userAgent.indexOf('Opera') !== -1) { currentBrowser = 'YaBrowser'; }
    else { console.log('Others'); }
  
    return currentBrowser;
  }
  
  export const OS = (window) =&gt; { getOperatingSystem(window); };
  export const currentBrowser = (window) =&gt; { getBrowser(window); };
  </code></pre>
  <p>The window object isn't available in the platform.js file so I'm attempting to add as an argument in the Login file. Here is the login file below:</p>
  <pre><code>import { OS, currentBrowser } from '../../../utils/platform';
  
  class Login extends BasePage {
    constructor(props) {
      super(props);
      this.state = {
        email: '',
        password: '',
        OS: '',
        browser: '',
      };
    }
  
  componentDidMount() {
      this.checkNoSession();
      super.componentDidMount();
      console.log(OS(window));
      console.log(currentBrowser(window));
    }
  </code></pre>
  <p>Ultimately I'd like to set the state of OS and browser to be the value returned by the imported methods. However currently when I'm console logging these I'm receiving 'undefined'.</p>