CODEWITHSUNDEEP
reactjsreact-nativereact-propsreact-functional-component
punygod
punygod

Reputation: 307

React Native not rendering prop even though data is available

I just started a basic React Native app using the template for tabbed view. I need to be able to make a http get request for some data and I used the example from the docs as a starting point. Rendering the works fine when in the same component. I am trying to create another component for the list item and passing the data as a prop from the parent.

Parent:

  const [isLoading, setLoading] = React.useState(true);
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;
    fetch("https://reactnative.dev/movies.json", { signal: signal })
      .then((response) => response.json())
      .then((json) => setData(json.movies))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));

    return function cleanup() {
      abortController.abort();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab Mars One</Text>
      <View
        style={styles.separator}
        lightColor="#eee"
        darkColor="rgba(255,255,255,0.1)"
      />
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Post item={item} />
          )}
        />
      )}
    </View>
  );
}

Child:

const Post = (item) => {
    console.log(item)
  return (
    <TouchableOpacity>
      <View>
        <Text>{item.title}</Text>
      </View>
    </TouchableOpacity>
  );
};

When I run this, nothing renders at all. No console errors. Console logging the item in the Post component is logging the correct items from the API so I know the data is there and correctly formatted but nothing is being rendered. These are the only files I have edited in the project so I'm not sure where the issue is coming from or what I am missing. Please advise.

Upvotes: 0

Views: 581

Answers (1)

Drew Reese
Drew Reese

Reputation: 202872

Issue

You've passed your data to a prop item, but in Post have name the entire props object item.

Solution

Post needs to destructure item from props.

const Post = ({ item }) => {
  console.log(item)
  return (
    <TouchableOpacity>
      <View>
        <Text>{item.title}</Text>
      </View>
    </TouchableOpacity>
  );
};

Expo Snack

Upvotes: 1

Related Questions