Lodash _.reduce not recognized in React Native

Question

I'm not sure if this is an error on my part or not, because I can't find any difference between code I use and code in documentation and videos.

I have a piece of code that uses a SectionListto display data that is arranged and packages into an array using lodash's groupByand reducemethods.

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  ScrollView,
  Button,
  Picker,
  SectionList
} from 'react-native';

import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import { SearchBar } from 'react-native-elements';
import _ from 'lodash'; 



type Props = {};

export default class App extends Component<Props> {

  constructor(props) {
    super(props);
    this.findNearestBranch = this.findNearestBranch.bind(this);
    this.displayDirections = this.displayDirections.bind(this);
    this.displayUserLocationPin = this.displayUserLocationPin.bind(this);
    this.calculateNearestBranch = this.calculateNearestBranch.bind(this);
  }

  state = {
   ...
    branchArray: [
      {branchId: 12, name: "Main SSNIT Branch", description: "Where the big boys work", latitude:  5.559971399999999, longitude:-0.2002176999999392, region: "Northern Region" },
      {branchIdid: 52, name: "Aother smaller branch", description: "Where the small boys work", latitude:  6.559971399999999, longitude:-0.2002176999999392, region: "Eastern Region" }, 
      {branchId: 78, name: "Yet another random branch", description: "Where the crazy girls work", latitude:  7.059971399999999, longitude:-0.2002176999999392, region: "Northern Region" }, 
      {branchId: 96, name: "This isn't a branch. It's a twig", description: "Where the strange people play", latitude:  6.859971399999999, longitude:-0.2002176999999392, region: "Western Region" }
     ]
  }

  render() {

    return (
      <ScrollView contentContainerStyle={styles.container} >   

     ...


      <SectionList
        renderItem={this.renderBranchItem}
        renderSectionHeader={this.renderBranchHeader}
        sections={this.getBranchesForList}
        keyExtractor = {(item) => item.branchId}
      />

      </ScrollView>

    );
  }

  renderBranchItem = (branchItem) =>{
    return <View style={{borderBottomWidth:StyleSheet.hairlineWidth}}>
            <Text style={{fontSize:20, fontWeight:"bold"}}> {branchItem.item.name} </Text>
            <Text style={{fontSize:15,}}> {branchItem.item.description} </Text>
            <Text style={{fontSize:15,}}> {branchItem.item.longitude}, {branchItem.item.latitude}</Text>
            </View>
  }

  renderBranchHeader = (header) =>{
    return <View style={{borderBottomWidth:StyleSheet.hairlineWidth}}>
            <Header style={{fontWeight:"bold"}} title={header.section.region} />
            </View>
  }

  getBranchesForList = () =>{

    //Making an object containing the branches sorted by region {region: [branch1, branch2], region2: [branch 2, branch 4]}
    let sortedBranchesObject = _.groupBy(this.state.branchArray, branch => branch.region);

    //Now making that Object an array of structure [{data: [], region: "region"}, {...}]
    let letsortedBranchesArray = _.reduce(sortedBranchesObject, (accumulatingArray, nextValue, nextKey)=>{
      accumulatingArray.push({
        data: nextValue,
        region: nextKey
      });
      return accumulatingArray;
    }, []);

    return sortedBranchesArray;
  }

}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    height:400, 
    width: 400, 

  }
});

However, for some reason, _.reduce is not being recognized as a function in getBranchesForList. Here's a picture of the error log:

Am I doing something wrong here? I'm honestly not sure. I posted a GitHub issue about it, but the only answer I got was that my reference to _ may have changed. I can't find any evidence of such a thing happening, though.

Answer 1

Your issue has nothing to do with lodash.reduce. It is about your sections not being an array as SectionList expects it to be.

array of Sections

Docs.

<SectionList
    renderItem={this.renderBranchItem}
    renderSectionHeader={this.renderBranchHeader}
    sections={this.getBranchesForList()} // NB call
    keyExtractor = {(item) => item.branchId}
  />