React js compare value against object keys

Question

More like JavaScript question then a React one, but since the problem I have is in a React app, guess the title is correct.

Anyway. I have an object which contains API error codes like this:

const apiErrors = {
    "500": "System is currently unavailable. Please contact you system administrator or try again later",
    "404": "There was a problem with your request. Please contact support",
    "403": "Access denied",
    "408": "Your request timed out.",
    "default": "Oops! Lorem ipsum dolor sit amet"
}

In my component I have the API response with the error status. Now I want to compare the error status, if there's any, and show the correct friendly error. Something like:

componentDidUpdate(prevProps) {

  // map the object keys of apiErrors
  // compare it with the API error status
  if (this.props.error.response.status === apiErrors[i]//example: 403) {
    //show the corresponding error from the apiErrors
    //in this case 403 error "Access denied"
  }
}

But I don't know exactly how to do the comparison and show the correct message!

Can you use something like apiErrors.hasOwnProperty(errorCode) — TKoL
– TKoL, Commented Oct 27, 2017 at 9:42
So you want to check if value of this.props.error.response.status is one of the apiErrors? What are the possible values of this.props.error.response.status? — gurvinder372
– gurvinder372, Commented Oct 27, 2017 at 9:43
I'm guessing this.props.error.response.status is supposed to be 500 or 404 or 403, etc. So you could do if (apiErrors.hasOwnProperty(this.props.error.response.status)) { var message = apiErrors(this.props.error.response.status);... } — TKoL
– TKoL, Commented Oct 27, 2017 at 9:44

Naisheel Verdhan · Accepted Answer · 2017-10-27 09:43:19Z

1

I don't think you should be doing it in componentDidUpdate but rather should be doing in componentWillReceiveProps.

WARNING: If you attempt to setState in componentDidUpdate without relevant checks, you might enter into an infinite render loop.

Now for your question,

You can directly query apiErrors object like this: apiErrors[nextProps.error.response.status]

componentWillReceiveProps(nextProps) {
  if (nextProps.error && nextProps.error.response && nextProps.error.response.status && apiErrors[nextProps.error.response.status]) {
    this.setState({ errorMessage: apiErrors[nextProps.error.response.status] })
  }
}

The number of checks in if(...) statement ensures all keys are defined and you do not end up with an error like this: Cannot read property response of undefined.

answered Oct 27, 2017 at 9:43

Naisheel Verdhan

5,17124 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marzelin · Accepted Answer · 2017-10-27 10:08:33Z

What you want (I presume) is something like this:

class StatusDisplay extends React.Component {
  render() {
    if (!this.props.error.response.status) {
      return false
    }
    return <h2 > Error Message: {
      apiErrors[this.props.error.response.status]
    } < /h2>
  }
}

Live example:

const apiErrors = {
  "500": "System is currently unavailable. Please contact you system administrator or try again later",
  "404": "There was a problem with your request. Please contact support",
  "403": "Access denied",
  "408": "Your request timed out.",
  "default": "Oops! Lorem ipsum dolor sit amet"
}

class App extends React.Component {
  state = {
    code: undefined
  }
  render() {
    return ( <
      div >
      <
      ErrorMock onClick = {
        this.setStatus
      }
      code = {
        this.state.code
      }
      /> <
      StatusDisplay error = {
        {
          response: {
            status: this.state.code
          }
        }
      }
      /> <
      /div>
    )
  }
  setStatus = (code) => () => {
    this.setState({
      code
    })
  }
}

class ErrorMock extends React.Component {
  render() {
    const errorCodes = [500, 404, 403, 408, "default"]
    return ( <
      div >
      <
      h1 > Choose status error: < /h1> {
        errorCodes.map(code => < label > < input type = "radio"
          onClick = {
            this.props.onClick(code)
          }
          checked = {
            this.props.code === code
          }
          />{code}</label > )
      } <
      label > < input type = "radio"
      onClick = {
        this.props.onClick()
      }
      checked = {!this.props.code
      }
      />none</label >
      <
      /div>
    )
  }
}

class StatusDisplay extends React.Component {
  render() {
    if (!this.props.error.response.status) {
      return false
    }
    return <h2 > Error Message: {
      apiErrors[this.props.error.response.status]
    } < /h2>
  }
}

ReactDOM.render( < App / > , document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
</div>

Collectives™ on Stack Overflow

React js compare value against object keys

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related