title: react-native redux accessing / manipulating an object
body: <p>Hi I have this object and will have do some mathematical/statistical operations on it. Now I have to questions:</p>
  
  <ol>
  <li><p>How do I access it? For Example I'd like to access numbers[0]['B1']
  When I do {this.props.numbers[0]['B1']} I get: Cannot read property B1 of undefined.</p></li>
  <li><p>If I want to do some calculations on those numbers, where would I put them? From my limited experience with react redux, I know I should not do anything like that in reducers, am I right? Would I create more actions (action creators) to eg. get the average B1 number, or any statistical operations on the numbers, etc. Would it be recommended to use 'reselect' for this kind of tasks?</p></li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/zAFNN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zAFNN.png" alt="The Object called numbers"></a></p>
  
  <p>numReducer</p>
  
  <pre><code>import { LIST_NUMBERS, PICK_NUMBER, GET_DATA } from '../actions/actionTypes';
  
  export default (state = [], action = {}) =&gt; {
    switch (action.type) {
      case LIST_NUMBERS:
        return action.payload || [];
      case PICK_NUMBER:
        return action.payload;
      case GET_DATA:
        return action.payload;
      default:
        return state;
    }
  };
  </code></pre>
  
  <p>actions:</p>
  
  <pre><code>import { LIST_NUMBERS, PICK_NUMBER, GET_DATA } from './actionTypes';
  import dataSet from '../data.json';
  
  export const listNumbers = () =&gt; {
    const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    return {
      type: LIST_NUMBERS,
      payload: nums
    };
  };
  
  export const getData = () =&gt; {
    return {
      type: GET_DATA,
      payload: dataSet
    };
  };
  
  export const pickNumber = (num) =&gt; {
    return {
      type: PICK_NUMBER,
      payload: num
    };
  };
  </code></pre>
  
  <p>data.json</p>
  
  <pre><code>[
    {
      "DrawDate": "22-Mar-17",
      "B1": 12,
      "B2": 6,
      "B3": 11,
      "B4": 31,
      "B5": 27,
      "B6": 19,
      "BB": 42,
      "BS": 1,
      "DrawNumber": 2217
    },
    {
      "DrawDate": "18-Mar-17",
      "B1": 26,
      "B2": 37,
      "B3": 8,
      "B4": 3,
      "B5": 19,
      "B6": 41,
      "BB": 43,
      "BS": 3,
      "DrawNumber": 2216
    },
  ....
  </code></pre>
  
  <p>Home Container</p>
  
  <pre><code>import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';
  
  import { listNumbers, pickNumber, getData } from '../actions/numberActions';
  
  import Home from '../components/Home';
  
  const mapStateToProps = state =&gt; ({
    numbers: state.numbers
  });
  
  const mapDispatchToProps = dispatch =&gt; (
    bindActionCreators({
      listNumbers,
      pickNumber,
      getData
    }, dispatch)
  );
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Home);
  </code></pre>
  
  <p>Home Component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, Button, TextInput } from 'react-native';
  
  export default class Home extends Component {
    static navigationOptions = {
      title: 'Home Screen',
    };
    componentDidMount() {
      this.props.getData();
    }
  
    render() {
      const { navigate } = this.props.navigation;
      return (
        &lt;View&gt;
          &lt;Text&gt;####################&lt;/Text&gt;
          &lt;Text&gt;Intro Screen&lt;/Text&gt;
          &lt;Text&gt;Number: {this.props.numbers[0]['B1']}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  
  }
  </code></pre>
  
  <p>EDIT/ADDITION:</p>
  
  <p>As per suggestions below, I've changed the lifecycle method to ComponentWillMount and added a check to see if this.props.numbers is loaded.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, Button, TextInput } from 'react-native';
  
  export default class Home extends Component {
    static navigationOptions = {
      title: 'Home Screen',
    };
  
    componentWillMount() {
      this.props.getData();
    }
  
    render() {
      if (!this.props.numbers) {
         console.log('not yet loaded'); // or a spinner?
       }
      const { navigate } = this.props.navigation;
      return (
        &lt;View&gt;
          &lt;Text&gt;####################&lt;/Text&gt;
          &lt;Text&gt;Intro Screen&lt;/Text&gt;
          &lt;Text&gt;Number: {this.props.numbers[0]['B1']}&lt;/Text&gt;
  
        &lt;/View&gt;
      );
    }
  
  }
  </code></pre>
  
  <p>I still get the same error: Cannot read property 'B1' of undefined. Additionally, the console does not log 'not yet loaded', which would indicate that the numbers object is there - I'm just making an error accessing it.</p>
  
  <p>EDIT2:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, Button, TextInput } from 'react-native';
  
  export default class Home extends Component {
    static navigationOptions = {
      title: 'Home Screen',
    };
  
    componentWillMount() {
      this.props.getData();
    }
  
    listNums() {
      return this.props.numbers.map((num) =&gt; num['B1']);
    }
    listSingleNum() {
      return this.props.numbers[0]['B1'];
    }
    render() {
      if (!this.props.numbers) {
         console.log('not yet loaded'); // or a spinner?
       } else {
         console.log(this.listNums());
       }
      const { navigate } = this.props.navigation;
      return (
        &lt;View&gt;
          &lt;Text&gt;####################&lt;/Text&gt;
          &lt;Text&gt;Intro Screen&lt;/Text&gt;
          &lt;Text&gt;Number: {this.listNums()}&lt;/Text&gt;
  
        &lt;/View&gt;
      );
    }
  
  }
  </code></pre>
  
  <p>So listNums() works fine displaying B1s of each element but if I try to access a single B1 element as in listSingleNum, it throws the error mentioned before: ExceptionsManager.js:63Cannot read property 'B1' of undefined.</p>