API undefined issue with petfinder and ReactJS

Question

I am having an issue with petfinder API and ReactJS. Everything works until I try to access the pets "object/array".

import React, { Component } from 'react';
import { getPets } from '../actions'
import { connect } from 'react-redux'

class Pets extends Component {
  componentDidMount() {
    this.props.getPets()
  }
  render() {
    if (this.props.getPets === null) return null
    const { arrOfPets } = this.props
    const allPets = arrOfPets.petfinder
    console.log(allPets)
    return (
      <div>

      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    arrOfPets: state.pets
  }
}

export default connect(mapStateToProps, { getPets })(Pets)

It console logs everything fine and as soon as I add .pets to the allPets const it gives me the error can't find pets of undefined.

const allPets = arrOfPets.petfinder.pets

Answer 1

Don't wrap arrOfPets in curly brackets. Try this:

if (this.props && this.props.petfinder) {
const arrOfPets = this.props
const allPets = arrOfPets.petfinder
}

If you want to use the destructuring syntax, your variable will need to match the object property name.

const { petfinder } = this.props

Javascript (ES6) const with curly braces

Answer 2

After digging deeper it appears there is an issue with the api itself. Thanks for the help!!!