items.forEach is not a function react native

Question

I am learning react native and i tried to use react-native-grid-view for grid based layout. I want to show 3 images per row. But i am getting an error stating 'items.forEach is not a function'. What might be the issue?

Below is my code

    const data = [
        {image:require('./assets/img/Alcohol1.png'),price:1},
        {image:require('./assets/img/Bakery1.png'), price:2},
        {image:require('./assets/img/Beverages1.png'), price:3},
        {image:require('./assets/img/Alcohol1.png'), price:4},
        {image:require('./assets/img/FoodCupboard.png'), price:5},
        {image:require('./assets/img/Health&Beauty.png'), price:6},
    ]
const ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 });
const CATEGORIES_PER_ROW = 3;

class Category extends Component{
    render(){
        console.log('props value',this.props.category);
        return(
                <View style={styles.category}>
                    <Image source={this.props.category.image} style={styles.thumbnail} />
                    <View>
                        <Text 
                            style={styles.price}
                            numberOfLines={3}>{this.props.category.price}</Text>
                    </View>
                </View>
            )
    }
}

class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            isRefreshing:false,
            dataSource: ds.cloneWithRows(),
        }
        this.renderItem = this.renderItem.bind(this);
    }

    componentDidMount() {
        console.log(data);
        this.setState({
            dataSource:ds.cloneWithRows(data),
            isRefreshing:true,
        });
    }

    render() {
        if (!this.state.isRefreshing) {
          return this.renderLoadingView();
        }

    return (
      <GridView
        items={this.state.dataSource}
        itemsPerRow={CATEGORIES_PER_ROW}
        renderItem={this.renderItem}
        style={styles.listView}
      />
    );
  }

      renderLoadingView() {
        return (
          <View>
            <Text>
              Loading Categories...
            </Text>
          </View>
        );
      }

      renderItem(item){
        console.log('item',item);
        return <Category category={item} />
      }
}



const styles = StyleSheet.create({
    container:{
        flex:1, // fill the entire screen
        alignItems:'stretch'
    },
    category: {
        height: 150,
        flex: 1,
        alignItems: 'center',
        flexDirection: 'column',
  },
  price: {
        fontSize: 10,
        marginBottom: 8,
        width: 90,
        textAlign: 'center',
  },
   thumbnail: {
        width: 53,
        height: 81,
  },
  listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
  },
});