React JavaScript How to optimize this if / or statement

Question

Do you have a better way to create this if / elseif sentence?

 if ((navigator.userAgent.indexOf('Opera') || navigator.userAgent.indexOf('OPR')) != -1) {
      this.state.isBrowserAllowed = true;
    } else if (navigator.userAgent.indexOf('Chrome') != -1) {
      this.state.isBrowserAllowed = true;
    } else if (navigator.userAgent.indexOf('Safari') != -1) {
      this.state.isBrowserAllowed = true;
    } else if (navigator.userAgent.indexOf('Firefox') != -1) {
      this.state.isBrowserAllowed = true;
    }

You should not mutate the state directly. Use `this.setState` — MorKadosh, Oct 17 '20 at 16:27
Do you actually need to block other browsers (assuming that's what you're doing)? — jarmod, Oct 17 '20 at 16:29
This is not a duplicate of "Check variable equality against a list of values" - the userAgent is a long string which may contain certain browser substrings — CertainPerformance, Oct 17 '20 at 16:30
Yes I'm trying to detect when user try to use my web on Instagram or Xiomi, or other browser... — Alejandro Arias, Oct 17 '20 at 16:31
looks like a duplicate of https://stackoverflow.com/questions/13737091/concise-way-to-compare-against-multiple-values — Nina Scholz, Oct 17 '20 at 16:54

CertainPerformance · Accepted Answer · 2020-10-17T16:28:35.803

4

I'd use a regular expression instead.

this.setState({
  ...this.state,
  isBrowserAllowed: /Opera|OPR|Chrome|Safari|Firefox/.test(navigator.userAgent)
});

Also, as the comment notes, state should not be mutated in React - use setState instead.

edited Oct 17 '20 at 16:28

answered Oct 17 '20 at 16:27

CertainPerformance

313,535
40
245
254

React JavaScript How to optimize this if / or statement

1 Answers1