oldo.nicho oldo.nicho - 1 year ago 118
Javascript Question

React Native/Redux - Can't access Redux store

I'm trying to access two parts of my Redux store within a React Native component that I'm working on and for some reason, probably something simple, I can't get things working.

I'm passing the

as a property to the component and then I want to retrieve the appropriate order details from the Redux store:
but when trying to assign the local variable:

const order = this.props.orders[orderID];

I'm getting the error:
Cannot read property 'orders' of undefined
, i.e.: for some reason the
part of the Redux store appears to not have
ed to the component props.

Code is as follows:

import React from 'react';
import { connect } from 'react-redux';
import {
} from 'react-native';
import Status from '../Status';
import Card from './Card';
import CardSection from './CardSection';

const OrderDetail = ({ orderID }) => {
const order = this.props.orders[orderID];
const {
} = order;

return (
<View style={styles.headerContentStyle}>
<View style={styles.bookingIdHeaderContainerStyle}>
<Text style={styles.headerTextStyle}>Booking #{id}</Text>
<View style={styles.grossPriceHeaderContainerStyle}>
<Text style={styles.headerTextStyle}>{currency_symbol}{gross_price}</Text>
<View style={styles.statusHeaderContainerStyle}>
<Status status={status} />
<View style={styles.orderListContentStyle}>
<Text>Booking #1234</Text>

const styles = {
headerContentStyle: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
headerTextStyle: {
fontSize: 18
bookingIdHeaderContainerStyle: {
flex: 5
grossPriceHeaderContainerStyle: {
flex: 2
statusHeaderContainerStyle: {
flex: 2
orderListContentStyle: {


const mapStateToProps = state => {
return ({
orders: state.orders,
bookings: state.bookings

export default connect(mapStateToProps)(OrderDetail);

Any suggestions?

Answer Source

OrderDetail is a stateless functional component, and functional components don't have a this keyword.

May be this is what you wanted:

const OrderDetail = (props) => {
  const order = props.orders[props.orderID];
  // ...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download