react.js“这”是保留字

Question

I have a two fold question. I am trying to to write a component that checks if the user is on mobile or not, if they are mobile, the state isMobile switches to true (and visa versa if on desktop).

I have gotten it where I can check for mobile and that works, but getting it to say "true or false" and also conquering the this is a reserved word is stumping me pretty bad.

Any help here is majorly appreciated, here is my code:

//this part will be imported via a component.  Need to check and make sure how to update state via component.
const checkIfMobile = {
  Android: function() {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
  },
  any: function() {
    return (
      checkIfMobile.Android() ||
      checkIfMobile.BlackBerry() ||
      checkIfMobile.iOS() ||
      checkIfMobile.Opera() ||
      checkIfMobile.Windows()
    );
  }
};

//testing out a function to a get a boolean (true or false)
const trueOrFalse = () => {
  console.log('hi', checkIfMobile);
};

export default class App extends Component {
  constructor() {
    super();
    //the state "isMobile" would update the boolean changing the test when user is using mobile device
    state = { isMobile: true };
  }
  render() {
    //an if/else statement to see if it will detect mobile.  It does however I have the problem of "this is a reserved word"
    if (checkIfMobile.any()) {
      console.log("it's mobile");
    } else {
      trueOrFalse();
    }

    const isMobile = { this.state.isMobile };

    return (
      <div>
        <ChromePluginNotice />

        <Banner isMobile={isMobile} />
        <Content isMobile={isMobile} />
        <Footer />
      </div>
    );
  }
}

thank you in advance for your help

Answer 1

Change

const isMobile = { this.state.isMobile };

to

const { isMobile } = this.state;

Answer 2

Since you mobile check is synchronous, you can update the isMobile state property in the constructor. In addition, const { isMobile } = this.state; is the correct way of getting isMobile out of the state, and it will solve your this is a reserved word problem.

The following code should work, but I haven't tested it:

export default class App extends Component {
  constructor() {
    super();

    // set the isMobile prop in state
    this.state = { isMobile: checkIfMobile.any() };
  }
  render() {
    const { isMobile } = this.state; // destructure isMobile to variable 

    return (
      <div>
        <ChromePluginNotice />

        <Banner isMobile={isMobile} />
        <Content isMobile={isMobile} />
        <Footer />
      </div>
    );
  }
}

Note : instead of reinventing the wheel, and creating your own mobile detect, try to use an existing module, such as bowser .