title: some JSON data is not accessible using dot notation, craziest thing
body: <p>I'm working on a react/redux project that uses axios to get data, but some of the data is not accessible using dot notation for some reason. </p>
  
  <p>For example, this pulls in the data just fine:</p>
  
  <pre><code>console.log(this.props.apts.data)
  </code></pre>
  
  <p>while this returns TypeError: Cannot read property 'apartments' of undefined:</p>
  
  <pre><code>console.log(this.props.apts.data.apartments)
  </code></pre>
  
  <p>I know for a fact there is data present. This happens in other parts of the file as well, not just this one particular array of objects. </p>
  
  <p>Here's one of the JSON files I'm working with: <a href="https://api.myjson.com/bins/x2ad4" rel="nofollow noreferrer">https://api.myjson.com/bins/x2ad4</a></p>
  
  <p>This is my action creator:</p>
  
  <pre><code>export const fetchPosts = () =&gt; {
    return async dispatch =&gt; {
      const response = await jsonPlaceholder.get('https://api.myjson.com/bins/x2ad4');
  
      dispatch({ type: 'FETCH_POSTS', payload: response })
    }
  }
  </code></pre>
  
  <p>If I change the payload to response.data.apartments, I can then get access to the apartments array in my component like so:</p>
  
  <pre><code>class PostList extends Component {
  
    componentDidMount() {
      this.props.fetchPosts();
    }
  
    formatPricing(price) {
      if(this.props.apts[0].pricing.currency === 'EUR') {
        return `${price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")} €`;
      } else {
        return `£${price}`
      }
    }
  
    renderList() {
      return this.props.apts.map(apartment =&gt; {
        return (
          &lt;Grid key={apartment._id} item lg={4} md={6} xs={12}&gt; 
            &lt;div&gt; 
              &lt;img style={{objectFit: 'cover'}} src={apartment.images.photos[0].path} alt="" width='100%' height="150px"/&gt;
              &lt;div className="containeraps"&gt;
                &lt;div className='aptprice'&gt;{this.formatPricing(apartment.pricing.price)}&lt;/div&gt;
                &lt;div className="monthutil"&gt;
                  &lt;div&gt;Per Month&lt;/div&gt;
                  &lt;div&gt;Utilities incl.&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="movein"&gt;
                from 29.24.2019 - {parseInt(apartment.details.squareMeters)} m² - {apartment.bedroomCount} bedroom
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/Grid&gt;
        )
      })
    }
  
    render() {
      return (
        &lt;div className='aptlist'&gt;
          &lt;Grid container spacing={24}&gt;
            {this.renderList()}
          &lt;/Grid&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return { apts: state.PostsReducer }
  }
  
  export default connect(mapStateToProps,
    {fetchPosts}
  )(PostList);
  </code></pre>
  
  <p>But if I just use the response as the payload, then I can't access the apartments array because 'return this.props.apts.data.apartments.map(apartment =>' gives me an TypeError: Cannot read property 'apartments' of undefined. </p>
  
  <p>Unfortunately, I need data from just the response as well, so I don't have a workaround.</p>
  
  <p>This is my reducer: </p>
  
  <pre><code>export default (state = [], action) =&gt; {
    switch(action.type) {
      case 'FETCH_POSTS':
        return action.payload;
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>I initially thought it had something to do with not loading the data, but since some of the data is present it must all be accessible. That's what's stumping me right now, why is only some of the data accessible while some isn't. </p>
  
  <p>I've switched around how I'm referencing the data using dot notation in various different files to change how I pull it in, but so far there's only 1 way to get access to the apartments array. The crazy thing is that I can console.log it even when it doesn't work, and I see the data in the console. </p>
  
  <p>Update: I can't update anything that is more than 2 calls deep using dot notation. So props.apts.queryParams returns info, but using dot notation to get anything inside of queryParams doesn't work either.</p>
  
  <p>And for the apartments array, I cannot view any unique indexes of that array. So props.apts.apartments display the array of data, while props.apts.apartments[0] doesn't display any data at all. I tried using spread operators to fix this but I wasn't able to find a solution.</p>