So that's what we're gonna do in this guide and this should be a pretty short guide because I'm going to break this into a few different elements. So, let's go into Visual Studio Code, and right here inside of the render function of the blog component, we are going to create a variable and this variable is going to store all of our blog records.

So, I'm going to say inside of render const and I'm just gonna call it blogRecords and I'm gonna set this equal to this.state.blogItems.map, so we're going to map, we're going to iterate over all of our blogItems in state and then we are going to store that 'cause remember, map returns an array, so everything that map does is gonna be stored inside of blogRecords.

So I'm gonna say map and then we're gonna provide a record for it, so let's just say blogItem, once again, this is just the argument, so this could be called anything, this could be called asdf if you wanted the world's most horrible variable name. We're gonna call it blogItem because every time this iterates through, it's going to grab one of the blog items, so I think that's a good name for it and then we'll give an arrow function and then curly brackets.

blog.js

render () {
  const blogRecords = this.state.blogItems.map(blogItem => {

  })

Now, make sure with .map, you always have to have it returning a value. For right now, we're gonna do something pretty basic with it. I'm gonna have it return an h1 tag and inside of curly brackets, I'll call blogItem.title 'cause that is the main name for each one of those blog records. So, I'm gonna call blogItem.title and the h1 tag and then that should be all that we need in order to get this working.

render () {
  const blogRecords = this.state.blogItems.map(blogItem => {
    return <h1>{blogItem.title}</h1>;
  });

Now, I'm gonna come down into what gets returned and I'm gonna get rid of everything except for the div tags and then inside of here, inside of curly brackets, I can just call blogRecords.

return (
  <div>
    {blogRecords}
  </div>
);

Now note that you don't have to say this.blogRecords and the reason for that is because we are actually inside of a function, we're inside of render, so blogRecords the variable is scoped locally and if that sounds too weird, what it means is that because we're in a function, we're able to call any variables that we create in that function from other parts of the function, so right here we're inside of the return statement, we can call a variable like blogRecords without saying this dot and accessing it that way.

So, now with all of this in place, this should be working, so let's go test out in Google Chrome and yes, we have each one of the titles for our blog, so that is working very nicely.

Now, with this in place, in the next guide, I want to perform a refactor and it's considered a best practice because let's say that we have this code here and then we wanna add a snippet of content and then a link and all of these things, this little iterator function is gonna start to get pretty big.

Any time that that happens, you usually can see it as a sign that this should be refactored out into either a function or even into its own component and that's what we're gonna do, so in the next guide, we're gonna create a blogItem component and we're going to wrap all of the view data that's gonna be shown inside of it.

Resources

• Source code