Now that we have a loading state, and we can be confident that our posts are only going to be rendered once they are actually live on the application, now let's start actually starting to bring the data out, so we're going to grab the name, content, and things like that. We're not going to worry about the image quite yet, we're going to save that for a few guides later. So let's get started here, and I'm going to start off with the most dead-simple way of doing this, and then we're eventually going to break it up into different components, but let's start with a basic one. So we have our list of posts here, the easiest way that we could have this rendered is in a view tag right here, right in line in the "JSX". So I'm going to delete this text component here,

FeedScreen (delete Text Component)

I'm going to add a new "View". I'll close it off, and in fact, let's make this a "ScrollView", because I think that makes sense, we're going to have all of these different things, and they're going to be really long, coming all the way down the screen, we should give the users the ability to scroll up and see those. So I'm going to get rid, I'm going to keep the text tag for right now, because we're about to use it, and let's bring in a new "ScrollView" component.

FeedScreen (Importing ScrollView)

That's what we're going to make this. So this is going to be a "ScrollView" and close off that tag with the "ScrollView".

FeedScreen (Adding ScrollView to return)

Now inside of here, we're going to iterate over our posts, so I'm going to use another set of curly brackets, and then inside of our map function, we're going to loop through each one of our posts, and we're going to render some more "JSX" code. So, I'm going to say post fat arrow function, and then I'm simply going to say view and text. For right now let's just get the name, so here I'll say "post.name", and then also we're going to get an error if we don't add a key here. If you went through some of my other React courses, you know that any time you loop over a collection, or you render an array inside of React, you need to make sure you pass a key with each iteration. So in the first view tag, I'm going to say "key={post.id}", and you can see here in the top left-hand side, we have access to that id.

FeedScreen

So let's see if this works, I'm going to hit save, and that looks perfect, look at that, so we've pulled out the name for each one of those five posts, and that's looking really nice.

Output

So I'm liking how this is coming along. Now, as we start to build out this application, we're going to use the details of the post, the post name, the image, maybe who created it, different things like that, for multiple spots. Any time that you are building a component out or you're building out a feature, and you realize you're going to start sharing that functionality across the application, it might be the best time to start creating a dedicated component for that feature. So let's do that, let's create a "PostItem" component to place all of this logic, and the reason for that is because right now this is pretty basic. This is only really just three lines of code here to render out this data, but we're eventually going to have an image and details and all of those kinds of things, and so we don't really want to have all of that logic in our "FeedScreen" component, so I'm going to come here, going to open up the file system, and let's go up into our components directory,

FeedScreen (File Explorer)

I'm going to create a new nested directory called "posts/PostItem.tsx".

FeedScreen (File Explorer)

Then let's create this, so I'll say import React from "react" and then let's create an interface, because it's always a good idea to have an idea for the shape of our component. So I'm going to say "IPostItemProps", and this interface is just going to take a post, so it's going to take a post, and inside of that post, we know we're going to have a few attributes, we're always going to have an "id", that's of type "number", then we're going to have a "name", which is of type "string", then we're going to have "content". Now for the "content", I'm not actually going to put this inside of the "PostItem", and the reason for that is because I don't want to have our post item to always show the content, because let's say that we have this big long "FeedScreen", so imagine you're building Instagram. If you have Instagram, if you're scrolling through, they don't have all of the content right there, they maybe have a snippet of it, or they may not have any content at all. So what I want to do with my "PostItem" is only have the name and then the image, and that's it for right now. So let's go and see what that image URL is going to look like, let's actually open up the terminal here. That image "URL" is called "post_image_url". So I'm going to copy this, we may or may not at some point use the date, I'm not going to lock ourselves into having to use that right now, so for right now I'm just going to get the "post_image_url", and that's going to be of type string, and so that's going to be everything that we need for right now for our interface.

PostItem

So notice, whenever you're creating an interface like this, this is kinda the structure that you're going to follow, you're going to look at the data as it comes in, if you're working with an API, then you're probably going to be looking at its documentation, and then you're going to be able to craft the interface to match the data that you want to use. So that is everything we need for right now, now let's actually create the component. So I'll say "export default", and then this is going to take in the props, and then of "IPostItemProps", it'll be a fat arrow function, and then for right now, let's simply return exactly what we have here. So I'm just going to take all of this out, and say I want you to return this. Now we have to do a few things, we have to make some imports and we have to restructure how we're calling this data, but for a base case, this is everything that we need. So let's first "import" the two React Native components, so I'm going to say import a view tag and a text tag, from "react-native" and you can see that those errors went away.

PostItem (Importing View, Text)

Now, let's grab the "post id" and the "post name". Now we could do something like this where we say "props.post.id", and then "props.post.name", and as you can tell that works, but we also could do better, we could use destructuring here to make our code a little more readable, so I could say here const and then I could just say "name", and get that from "props.post", and now inside of this "text tag", we only need name, and then we don't even need this "key" at all, we're going to pass this directly to the component. So let's hit save here, and this should be everything we need to replicate what we already had in place.

PostItem (return statement)

So if you go to the "FeedScreen" now, and import this, so if you have auto importer installed, then you should be able to type a greater than bracket or less than bracket, and then "PostItem", and then all we have to pass in is the "post" as a "prop", and then here this is where we'd place the "key". So here I can say "key=post.id".

FeedScreen (return statement)

Okay, let's see if this works. So open up the simulator, and there you go, everything there is working perfectly, and now we have a lot better structure to our code

FeedScreen (Output)

Like I mentioned, this may not have seemed like a lot of code if we would've built out the full "PostItem" here and just left it in place. Like we said, we technically just had three lines of code replaced with having to write 20 lines of code, but as we're building this out, we're going to start bringing in other dependencies like an image component, and we're going to add styles, and we're going to be doing all of that. We wouldn't want to clutter up our "FeedScreen" with that logic. Instead, it makes a lot more sense to really wrap all of that inside of a dedicated component, because then if you want to call this component from any other part of the application, then you can simply import "PostItem", pass in the data that is needed, and then it will be rendered right there. That really goes to the heart of how component-based architecture works, and it's part of the reason why frameworks and tools like "React" and "React Native" have become so popular, because it really gives you a mental framework for thinking about how you want to build your applications. You can wrap up all of your behavior and your business logic around specific features, and then have those components shared wherever they need to be called, and it decreases the duplicate code you have to write and it makes it a lot easier to read and maintain your code. So this is coming along nicely, you can see right here we have our "PostItem", we're grabbing our names, we have all of that working perfectly. So with all of this in place, I think we're at a good spot to move into working with images, and so that's what we're going to do, in the next guide we're going to see how we can use an image tag and how we can pass our "image URL" into it, so that we can start viewing those directly here on the screen.

Resources

• Source code