title: Type error : cannot read property from mapstatetoprops
body: <p>I am new to react-native
  In reducer I set the initial value of the state.
  while receiving the value in mapstate to props, it gives me the error
  Type error : cannot read property of datasource.</p>
  
  <p>I tried to set initial state to blank object then on fetch I set the value but  I am still getting the error.</p>
  
  <p>/* This is Dashboard.js */</p>
  
  <pre><code>   import React, { Component } from 'react'
  import { FlatList, StyleSheet, View, Text,Image,ActivityIndicator,
              Picker,TouchableOpacity,SectionList,DrawerLayoutAndroid,Alert,
            TouchableHighlight,Button} from 'react-native'          
  import NumericInput from 'react-native-numeric-input'
  import {connect} from 'react-redux';
  
  
  
  import {
    createDrawerNavigator,
    createStackNavigator,
    createAppContainer,
  } from 'react-navigation';
  
  
  
  const mapStateToProps = (state) =&gt;{ 
      console.log(state)    
      return { 
        datasource:state.datasource,   
        isLoading:state.isLoading,
        switchValue: state.switchValue,
        page:state.page,    
        rerender:state.rerender,
        isFetching: state.isFetching, 
        search:state.search,
        LastSelectedItem:state.LastSelectedItem,
        ItemSelected:state.ItemSelected,
        setdrawerstate:state.setdrawerstate
      }
    };
  
  const mapDispatchToProps=(dispatch)=&gt;{
    console.log('i am ni map dispatch to props')
    return {
      quantitychange:(prodindex, changevalue)=&gt;dispatch({type:"CHANGE_QTY",
                                                     index:prodindex,
                                                     value:changevalue}),
      selectvaluechange:(index,itemvalue,itemindex)=&gt;dispatch({type:"CHANGE_WEIGHT",
                                                                      index:index,
                                                                      itemvalue:itemvalue,
                                                                      itemindex:itemindex}),
      ToogleDrawerState:(newState)=&gt;dispatch({type:'TOOGLE_DRAWER',newState:newState}), 
      taggleSwitch:(value,ind)=&gt;dispatch({type:'TOOGLE_SWITCH',value:value,ind:ind}),
      fetchAllData:(AlldataJson)=&gt;dispatch({type:'ALL_DATA',AlldataJson:AlldataJson})
      };
  };
  
  class DashBoard extends Component {
    constructor(props) {
      super(props)   
      console.log('i am in constructor')
      console.log('the value getting as props is '+JSON.stringify(props));
      // this.selectvaluechange=this.selectvaluechange.bind(this); 
      // this._opendrawer = this._opendrawer.bind(this);   
    } //constructor
  
  
    packageList = (index) =&gt;{
      // console.log('i am in package list'+index)
      return( this.props.datasource[index].pack.map( (x,j) =&gt; { 
            return( &lt;Picker.Item label={x.Weight} key={j} value={x.packId}/&gt;)}));
  }
  // Verdana 20
  
    renderItem = ({ item,index }) =&gt; {
      //  console.log('i am in render item index is '+index+' item vale is '+JSON.stringify(item));
        return(
        &lt;View style={{
          flex: 1, flexDirection: 'row', marginBottom: 3,
          paddingBottom: 10, paddingTop:10, paddingLeft: 10, backgroundColor: 'white', height: '25%'
        }}&gt;
          &lt;View style={{ width: '30%' }}&gt;
            &lt;Image style={{ resizeMode: 'contain', height: '100%',width:'100%' }}
              source={{ uri: this.props.datasource[index].imageUrl }} /&gt;
          &lt;/View&gt;
          &lt;View style={{ alignContent: 'center', paddingLeft: 40, width: '65%' }}&gt;
            &lt;Text style={{
              fontSize: 20, color: 'black', fontWeight: 'bold',
              fontFamily: 'Verdana'
            }}&gt;
              {item.Heading}&lt;/Text&gt;
            &lt;Text style={{
              fontSize: 12, paddingTop: 10, fontFamily: 'Verdana',
              color: 'black', fontWeight: 'bold'
            }}&gt;{item.Details}&lt;/Text&gt;
            &lt;View style={{ flex: 1, flexDirection: 'row', paddingTop: 15 }}&gt;
              &lt;Text style={{ width: 40, height: 30, fontFamily: 'Verdana', fontWeight: 'bold' }}&gt;Qty :&lt;/Text&gt;
              &lt;NumericInput
                totalHeight={30}
                totalWidth={80}
                minValue={0}
                value={this.props.datasource[index].Qty}
                onChange={(value) =&gt; this.props.quantitychange(index, value)} /&gt;
              &lt;Picker
                style={{ marginLeft: 10, width: '45%', height: 40, fontFamily: 'Verdana', fontWeight: 'bold' }}
                mode="dropdown"
                selectedValue={this.props.datasource[index].packselectedValue}
                onValueChange={(itemValue, itemIndex) =&gt; this.props.selectvaluechange(index, itemValue, itemIndex)}&gt;
                {this.packageList(index)}
              &lt;/Picker&gt;
            &lt;/View&gt;
            &lt;View &gt;
              &lt;Text style={{ fontFamily: 'Verdana', fontWeight: 'bold' }}&gt;Price  : {this.props.datasource[index].
                pack[this.props.datasource[index].packselectedValue].Price}
                &lt;Text style={{ fontFamily: 'Verdana', fontWeight: 'bold' }}&gt;     Amount : {this.props.datasource[index].
                  pack[this.pack.datasource[index].packselectedValue].Price *
                  this.props.datasource[index].Qty}
                &lt;/Text&gt;
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      )  
    }
  
    renderSeperator=()=&gt;{
      console.log('I am renderseperator the data ')
      return(
        &lt;View style={{height:1,width:'100%',backgroundColor:'black'}}/&gt;
      )
    }
  
    onRefresh=()=&gt;{
      console.log('I am refreshing the data '+this.props)
     // this.setState({isFetching:false})
    }
  
    componentDidMount() {
      AlldataJson = [{}];
      console.log('i am in component didmount ');
      const url='./../Data/AllProduct.json'    
      // ./../Data/AllProduct.json'
      fetch(url)
        .then((response) =&gt; response.json())
        .then((responsejson =&gt; {
          console.log('i am in response json')
           fetchAllData(responsejson)}))
  
          //this.setState({ datasource: responsejson })})
        .catch((error) =&gt; {        
          console.log('error in fetching the data bhasker')
          this.props.fetchAllData(AlldataJson);
          console.log('i am after fetchalldata function'+this.props)
        })
        this.props.navigation.setParams({ opendrawer: this._opendrawer});      
    }
    // data={this.state.page===1?this.state.datasource:[this.state.datasource]}
  
    render() {
       return (
        this.props.isLoading ? 
        &lt;View style={{ flex: 1, justifyContent: 'center', alignContent: 'center' }}&gt;
          &lt;ActivityIndicator size='large' color='#330066' animating /&gt;
        &lt;/View&gt; : &lt;View&gt;
                  {/* &lt;Text&gt;{this.props.datasource[0].Heading}&lt;/Text&gt; */}
               &lt;FlatList                
                  extraData={this.props.state}
                  data={this.props.datasource}
                  onRefresh={() =&gt; this.onRefresh()}
                  refreshing={this.props.isFetching}
                  renderItem={(item,index)=&gt;this.renderItem(item,index)}
                 keyExtractor={(item, index) =&gt; {
                        console.log('i am in keyextractor')                
                        return (item.Id)}}
                ItemSeparatorComponent={this.renderSeperator}/&gt;  
        &lt;/View&gt;
       )
    }
  }
  
  
  export default connect(mapStateToProps,mapDispatchToProps)(DashBoard);
  </code></pre>
  
  <p>/* My Reducer code is */</p>
  
  <pre><code>import * as types from '../Action/ActionType'
  import { objectExpression } from '@babel/types';
  import Allproduct from './../Data/AllProduct';
  
  const initialstate={    
          datasource: Allproduct,
          isLoading:false,
          switchValue: true,
          page:1,    
          rerender:true ,
          isFetching: false, 
          search:"" ,
          LastSelectedItem:{Item:"",qty:"",weight:""},
          ItemSelected:0,
          setdrawerstate:true
        }
  
  const reducer = (state = initialstate, action) =&gt; {
      console.log('i am in reducer '+JSON.stringify(action));
      switch (action.type) {         
          case "CHANGE_QTY": 
              break;
          case "CHANGE_WEIGHT":
              break;
          case "TOOGLE_DRAWER": 
              break;
          case "TOOGLE_SWITCH": 
              break;
          case "ALL_DATA": 
              console.log('i am in all data') ; 
              return state;            
         default:
              return state;
      }
  
  }   
  
  export default reducer;
  </code></pre>
  
  <p>/* if i comment datasource in mapstatetoprops it print the text value.<br>
  Allproduct json is below
  */</p>
  
  <pre><code>[{"Id":"1","Heading":"Ashirvad","Details": "ashirvad Atta - Whole Wheet 10k Pouch","imageUrl": "https://www.aashirvaad.com/images/packet-2-right.png",                                        "Qty": 0,"pack": [{"packId":0,"Weight": "1kg","Price": 25},                            {"packId":1,"Weight": "2kg","Price": 50},                            {"packId":2,"Weight": "5kg","Price": 125},                            {"packId":3,"Weight": "10kg","Price": 250}],                            "packselectedValue":0,"isselected": false,"categoryID":"1"},    {"Id":"2","Heading": "Tata Salt","Details": "Tata Salt Iodised Salt 1kg Product","imageUrl": "http://tatasalt.com/public/front_assets/images/tab-product-img1.png","Qty": 0,"pack": [{"packId":0,"Weight": "1kg","Price": 9.5},{"packId":1,"Weight": "2kg","Price": 19}, {"packId":2,"Weight": "5kg","Price": 47    },{"packId":3,"Weight": "10kg","Price": 92}],"packselectedValue":0,"isselected": false,"categoryID":"1"},
  </code></pre>