CODEWITHSUNDEEP
javascriptreact-nativereact-native-flatlist
Alberto Ramos
Alberto Ramos

Reputation: 105

React Native TypeError: undefined is not an object (evaluating '_ref.item')

I'm trying to do an Instagram clone, but when using a FlatList I'm getting this error:

Error: TypeError: undefined is not an object (evaluating '_ref.item')

I followed this tutorial on youtube and my code is basically the same to the one on the video, I believe that probably the docs have changed due to the video was uploaded 1 year ago.

enter image description here

Using React Native Cli & android studio

import React, {Component} from "react";
import {FlatList} from "react-native";
import Post from "../presentation";

class PostFeed extends Component{

  _renderPost({ item }) {
    return <Post />;
  }

  _returnKey(item) {
    return item.toString();
  }

  render() {
    return (
      <FlatList
      data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
      keyExtractor={this._returnKey}
      renderItem={this._renderPost()}
    />
    );
  }
}

export default PostFeed;

Here's the InstaClone.js

import React, {Component} from "react";
import { View, Text, StyleSheet, Image, Dimensions, TouchableOpacity } from "react-native";
import config from "./config";
import { PostFeed } from './components/container';

class InstaClone extends Component {
  render() {
    return (
      <View style={{ flex: 1, width: 100+"%", height: 100+"%"}}>
          <View style={styles.tempNav}>
                <Text>Instagram</Text>
          </View>
          <PostFeed/>
      </View>
    );
  }
}

export default InstaClone;

const styles = StyleSheet.create({
    tempNav: {
      width:100+"%",
      height: 56,
      backgroundColor:"rgb(250,250,250)",
      borderBottomColor:"rgb(233,233,233)",
      borderBottomWidth: StyleSheet.hairlineWidth,
      justifyContent: "center",
      alignItems: "center"
    },
    userBar: {
      width:100+"%",
      height: config.styleConstants.rowHeight,
      backgroundColor: "#fff",
      flexDirection: "row",
      paddingHorizontal: 10,
      justifyContent: "space-between"

    },
    userPic: {
      height:40,
      width:40,
      borderRadius:20
    },

    iconBar: {
      height: config.styleConstants.rowHeight,
      width: 100 + "%",
      borderColor:"rgb(233,233,233)",
      borderTopWidth: StyleSheet.hairlineWidth,
      borderBottomWidth: StyleSheet.hairlineWidth,
      flexDirection: "row"
    },
    icon: {
      marginHorizontal: 5
    },

})

Upvotes: 2

Views: 7064

Answers (2)

Rajesh Bhartia
Rajesh Bhartia

Reputation: 758

Just replace your code with this and I think it will solve the issue

  <FlatList
     data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
     keyExtractor={this._returnKey}
     renderItem={({ item }) => <View> {item} </View>}
 />

Upvotes: 0

Nick V.
Nick V.

Reputation: 121

You’re trying to destructure an “item” in the argument to _renderPost. There is no object passed in so it is complaining.

Upvotes: 5

Related Questions