title: type error undefined name property in react native components
body: <p>I am getting type error of undefined name property I believe in my EmployeeEdit.js file. When I touch one item on the employee list I get this error instead of going to employee edit form with the passed parameter. I console logged and found state.employeeForm is not loading the values <code>{ name, phone, shift }</code> from EmployeeFormReducer. I m not sure why. </p>
  
  <p>here's the error</p>
  
  <pre><code>TypeError: Cannot read property 'name' of undefined
  
  This error is located at:
      in Connect(EmployeeForm) (at EmployeeEdit.js:21)
      in RCTView (at View.js:113)
      in View (at Card.js:6)
      in Card (at EmployeeEdit.js:20)
      in EmployeeEdit (created by Connect(EmployeeEdit))
      in Connect(EmployeeEdit) (at SceneView.js:35)
      in SceneView (at CardStack.js:413)
      in RCTView (at View.js:113)
      in View (at createAnimatedComponent.js:134)
      in AnimatedComponent (at Card.js:28)
      in Card (at PointerEventsContainer.js:55)
      in Container (at CardStack.js:443)
      in RCTView (at View.js:113)
      in View (at CardStack.js:373)
      in RCTView (at View.js:113)
      in View (at CardStack.js:372)
      in CardStack (at CardStackTransitioner.js:110)
      in RCTView (at View.js:113)
      in View (at Transitioner.js:192)
      in Transitioner (at CardStackTransitioner.js:60)
      in CardStackTransitioner (at StackNavigator.js:48)
      in Unknown (at createNavigator.js:36)
      in Navigator (at createNavigationContainer.js:198)
      in NavigationContainer (at App.js:37)
      in Provider (at App.js:36)
      in App (at renderApplication.js:35)
      in RCTView (at View.js:113)
      in View (at AppContainer.js:102)
      in RCTView (at View.js:113)
      in View (at AppContainer.js:126)
      in AppContainer (at renderApplication.js:34) 
  </code></pre>
  
  <p>EmployeeEdit.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import _ from 'lodash';
  import EmployeeForm from './EmployeeForm';
  import { employeeUpdate } from '../actions';
  import { Card, CardSection, Button } from './common';
  
  class EmployeeEdit extends Component {
    componentWillMount() {
      _.each(this.props.navigation.state.params.employee, (value, prop) =&gt; {
        this.props.employeeUpdate({ prop, value });
      });
    }
    onButtonPress() {
      const { params } = this.props.navigation.state;
      const { name, phone, shift } = params.employee;
    }
    render() {
      return (
        &lt;Card&gt;
          &lt;EmployeeForm {...this.props} /&gt;
          &lt;CardSection&gt;
            &lt;Button onPress={() =&gt; this.onButtonPress.bind(this)}&gt;
              Save Changes
            &lt;/Button&gt;
          &lt;/CardSection&gt;
        &lt;/Card&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    const { name, phone, shift } = state.employeeForm;
  
    return { name, phone, shift };
  };
  
  export default connect(mapStateToProps, { employeeUpdate })(EmployeeEdit);
  </code></pre>
  
  <p>EmployeeList.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { FlatList } from 'react-native';
  import { connect } from 'react-redux';
  //import { R } from 'ramda';
  import _ from 'lodash';
  import { employeesFetch } from '../actions';
  import { HeaderButton } from './common';
  import ListEmployee from './ListEmployee';
  
  
  class EmployeeList extends Component {
    static navigationOptions = ({ navigation }) =&gt; ({
      headerRight: (
        &lt;HeaderButton onPress={() =&gt; navigation.navigate('employeeCreate')}&gt;
          Add
        &lt;/HeaderButton&gt;
      )
    });
  
    componentWillMount() {
      this.props.employeesFetch();
    }
  
    keyExtractor(item) {
      return item.uid;
    }
    renderItem({ item }) {
      return &lt;ListEmployee employee={item} navigation={this.props.navigation} /&gt;;
    }
    render() {
      return (
        &lt;FlatList
        data={this.props.employees}
        renderItem={this.renderItem.bind(this)} // Only for test
        keyExtractor={this.keyExtractor}
        navigation={this.props.navigation}
        /&gt;
      );
    }
  }
  const mapStateToProps = (state) =&gt; {
    const employees = _.map(state.employees, (val, uid) =&gt; ({ ...val, uid }));
    return { employees };
  };
  
  export default connect(mapStateToProps, { employeesFetch })(EmployeeList);
  </code></pre>
  
  <p>ListEmployee.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Text,
    StyleSheet,
    TouchableWithoutFeedback,
    View
  } from 'react-native';
  import { CardSection } from './common';
  
  class ListEmployee extends Component {
  
    render() {
    const { employee } = this.props;
    const { navigate } = this.props.navigation;
    const { textStyle } = styles;
    const { name } = this.props.employee;
      return (
        &lt;TouchableWithoutFeedback onPress={() =&gt; navigate('employeeEdit', { employee })}&gt;
          &lt;View&gt;
            &lt;CardSection&gt;
              &lt;Text style={textStyle}&gt;{name}&lt;/Text&gt;
            &lt;/CardSection&gt;
          &lt;/View&gt;
        &lt;/TouchableWithoutFeedback&gt;
      );
    }
  }
  
  /**
   second argument in connect does 2 things. 1.  dispatches all actions creators
  return action objects to the store to be used by reducers; 2. creates props
  of action creators to be used by components
  **/
  export default ListEmployee;
  
  const styles = StyleSheet.create({
    textStyle: {
      fontSize: 18,
      paddingLeft: 15,
    }
  });
  </code></pre>
  
  <p>EmployeeForm.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Picker, Text, StyleSheet, View } from 'react-native';
  import { connect } from 'react-redux';
  import { employeeUpdate } from '../actions';
  import { CardSection, Input } from './common';
  
  class EmployeeForm extends Component {
      render() {
          return (
          &lt;View&gt;
            &lt;CardSection&gt;
              &lt;Input
                label="Name"
                placeholder="Jane"
                value={this.props.name}
                onChangeText={value =&gt; this.props.employeeUpdate({ prop: 'name', value })}
              /&gt;
            &lt;/CardSection&gt;
  
            &lt;CardSection&gt;
            &lt;Input
              label="Phone"
              placeholder="xxx-xxxx"
              value={this.props.phone}
              onChangeText={value =&gt; this.props.employeeUpdate({ prop: 'phone', value })}
            /&gt;
            &lt;/CardSection&gt;
  
            &lt;CardSection&gt;
            &lt;Text style={styles.pickerTextStyle}&gt;Shift&lt;/Text&gt;
            &lt;Picker
              style={{ flex: 1 }}
              selectedValue={this.props.shift}
              onValueChange={value =&gt; this.props.employeeUpdate({ prop: 'shift', value })}
            &gt;
              &lt;Picker.Item label="Monday" value="Monday" /&gt;
              &lt;Picker.Item label="Tuesday" value="Tuesday" /&gt;
              &lt;Picker.Item label="Wednesday" value="Wednesday" /&gt;
              &lt;Picker.Item label="Thursday" value="Thursday" /&gt;
              &lt;Picker.Item label="Friday" value="Friday" /&gt;
              &lt;Picker.Item label="Saturday" value="Saturday" /&gt;
              &lt;Picker.Item label="Sunday" value="Sunday" /&gt;
            &lt;/Picker&gt;
            &lt;/CardSection&gt;
          &lt;/View&gt;
        );
      }
    }
  
    const styles = StyleSheet.create({
      pickerTextStyle: {
        fontSize: 18,
        paddingLeft: 20
      }
    });
  
    const mapStateToProps = (state) =&gt; {
      const { name, phone, shift } = state.EmployeeForm;
  
      return { name, phone, shift };
    };
  
  export default connect(mapStateToProps, { employeeUpdate })(EmployeeForm);
  </code></pre>
  
  <p>here's my combineReducers</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import AuthReducer from './AuthReducer';
  import EmployeeFormReducer from './EmployeeFormReducer';
  import EmployeeReducer from './EmployeeReducer';
  import SelectionReducer from './SelectionReducer';
  
  export default combineReducers({
      auth: AuthReducer,
      employeeForm: EmployeeFormReducer,
      employees: EmployeeReducer,
      selectedEmployeeId: SelectionReducer
    });
  </code></pre>
  
  <p>here's EmployeeFormReducer</p>
  
  <pre><code>import { EMPLOYEE_UPDATE, EMPLOYEE_CREATE } from '../actions/types';
  
  const INITIAL_STATE = {
    // prop: 'name', value: ''
    name: '',
    phone: '',
    shift: ''
  };
  
  export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
        case EMPLOYEE_UPDATE:
  
  // [] is NOT an array; a syntax to convert value into key; called key interpolation??
          return { ...state, [action.payload.prop]: action.payload.value };
        case EMPLOYEE_CREATE:
          return INITIAL_STATE;
        default:
          return state;
      }
  };
  </code></pre>
  
  <p>here's the action creator</p>
  
  <pre><code>export const employeeUpdate = ({ prop, value }) =&gt; {
    return {
      type: EMPLOYEE_UPDATE,
      payload: { prop, value }
    };
  };
  </code></pre>
  
  <p>Here's the EmployeeForm.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Picker, Text, StyleSheet, View } from 'react-native';
  import { connect } from 'react-redux';
  import { employeeUpdate } from '../actions';
  import { CardSection, Input } from './common';
  
  class EmployeeForm extends Component {
      render() {
          return (
          &lt;View&gt;
            &lt;CardSection&gt;
              &lt;Input
                label="Name"
                placeholder="Jane"
                value={this.props.name}
                onChangeText={value =&gt; this.props.employeeUpdate({ prop: 'name', value })}
              /&gt;
            &lt;/CardSection&gt;
  
            &lt;CardSection&gt;
            &lt;Input
              label="Phone"
              placeholder="xxx-xxxx"
              value={this.props.phone}
              onChangeText={value =&gt; this.props.employeeUpdate({ prop: 'phone', value })}
            /&gt;
            &lt;/CardSection&gt;
  
            &lt;CardSection&gt;
            &lt;Text style={styles.pickerTextStyle}&gt;Shift&lt;/Text&gt;
            &lt;Picker
              style={{ flex: 1 }}
              selectedValue={this.props.shift}
              onValueChange={value =&gt; this.props.employeeUpdate({ prop: 'shift', value })}
            &gt;
              &lt;Picker.Item label="Monday" value="Monday" /&gt;
              &lt;Picker.Item label="Tuesday" value="Tuesday" /&gt;
              &lt;Picker.Item label="Wednesday" value="Wednesday" /&gt;
              &lt;Picker.Item label="Thursday" value="Thursday" /&gt;
              &lt;Picker.Item label="Friday" value="Friday" /&gt;
              &lt;Picker.Item label="Saturday" value="Saturday" /&gt;
              &lt;Picker.Item label="Sunday" value="Sunday" /&gt;
            &lt;/Picker&gt;
            &lt;/CardSection&gt;
          &lt;/View&gt;
        );
      }
    }
  
    const styles = StyleSheet.create({
      pickerTextStyle: {
        fontSize: 18,
        paddingLeft: 20
      }
    });
  
    const mapStateToProps = (state) =&gt; {
      const { name, phone, shift } = state.EmployeeForm;
  
      return { name, phone, shift };
    };
  
  export default connect(mapStateToProps, { employeeUpdate })(EmployeeForm);
  </code></pre>