If you were able to do that, that's pretty dope, but I'll show you how to do it if you were unable to. Let's go to requestsItem.js. Now, we need to get access to our props first. We need a constant, and then the props. These props are going to be all these attributes.

We've got an _id, a title, a body, a date, an imageUrl, a status, and junk. If you're able to get the image in there, then props to you because there's no clear idea of how to do that. Now, we need the _id, we need the title, and we need the body. We need the date, imageUrl, and status.

requestsItem.js

 render() {
        const { _id, title, body, date, imageUrl, status } = this.props;
        return (
            <div id='requests-item' className='requests-item'>
                <Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>
                <div className='requests-item__title'>
                    <div className='requests-item__title__text'>Yo my door fell down</div>
                    <Icon callback={() => this.toggleDropdown()} className='requests-item__title__arrow' icon='fas fa-sort-down'/>
                </div>
                <div className='requests-item__tenant-unit'>
                    {} - Unit 115
                </div>

That will give us all of our data because we're using spread operator in requests.js to pass it over. We have access to all of it. Let's put in the title and the unit. Unit is associated with the imageUrl, which means we can get that from Redux-Store.

You'll see, if we open up the Devtools, in our user object once we log in, we should get access to the unit. You see it's part of the user, so we just need to check the user and get that unit ID. We'll do that last.

We got the title, and we got the date. For the date, we just have to do exactly what we did in the newsletterArchive.js. We're just doing this, so let's just copy this and paste it in here.

requestsItem.js

<div className='requests-item__tenant-unit'>
    {title} - Unit 115
</div>
<div className='requests-item__date'>
    { date.getMonth() + 1 }
    /
    { date.getDate() }
    /
    { date.getFullYear() - 2000 } 
</div>

Now, for the body, let's change that from all this Lorem Ipsum junk to body.

requestsItem.js

<div className='item-description'>
    <img 
        className='item-description__img'
        src='http://via.placeholder.com/160/94'                        
    />
    <p className='item-description__text'>
        {body}
    </p>
</div>

We should be good, except for two things. First things first, we don't want to put title here. We want to put the name of the unit there. Let's leave that for a second. Let's put the title in here, so instead of Yo my door fell down, let's put in the title.

requestsItem.js

 render() {
        const { _id, title, body, date, imageUrl, status } = this.props;
        return (
            <div id='requests-item' className='requests-item'>
                <Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>
                <div className='requests-item__title'>
                    <div className='requests-item__title__text'>{title}</div>
                    <Icon callback={() => this.toggleDropdown()} className='requests-item__title__arrow' icon='fas fa-sort-down'/>
                </div>
                <div className='requests-item__tenant-unit'>
                    Max - Unit 115
                </div>

Basically, we got all the data out that we could, except for the image. Let's go to that image and the way you do this is by saying ROOT_URL, so we need to import ROOT_URL. So write that in and then we'll go import ROOT_URL up at the top. Let's say:

requestsItem.js

import { ROOT_URL } from '../../config';

Then let's scroll down here, and put in the ROOT_URL. I'm going to put in:

requestsItem.js

<div className='item-description'>
    <img 
        className='item-description__img'
        src={`${ROOT_URL}/uploads/`}                        
    />
    <p className='item-description__text'>
        {body}
    </p>
</div>

We might have to get rid of uploads but let's try it. So let's say /uploads/${}, and then put in the imageUrl. We should be good there. We're missing a few things still. We're missing the name, the unit, and this date isn't going to work.

You'll see in the terminal, we get back a string. We don't actually get back a date. So let's go see the break. Let's log in, let's go to requests, and we an error. Go to inspect, go to the console, and you'll see it says date.getMonth is not a function.

Pretty simple stuff. All we have to do is say:

requestsItem.js

 render() {
        const { _id, title, body, date, imageUrl, status } = this.props;
        const parsedDate = new Date(date);

Basically, it's just putting it into a string format, and then we just have to parse it back into a date object because JSON can't hold date objects, it can hold strings. That's how we get it. We have to parse it.

It's the same if we were to pass in an image. We would have to create an image out of that data, which is what I was originally going to do, but that's a lot of data to be passing over networks in a request like that. It's just messy. You can just reference where it's stored on the network. S

Now we just have to replace this date with parsedDate, so I'm going to say:

requestsItem.js

<div className='requests-item__tenant-unit'>
    Max - Unit 115
</div>
<div className='requests-item__date'>
    { parsedDate.getMonth() + 1 }
    /
    { parsedDate.getDate() }
    /
    { parsedDate.getFullYear() - 2000 } 
</div>

Now that should be working. Let's go in here, let's log in, select requests, and you'll see we get all of our data, which is really awesome. The only thing we're missing now is our image.

Let's try it. Let's go in here and let's get rid of uploads, so it says:

requestsItem.js

<div className='item-description'>
    <img 
        className='item-description__img'
        src={`${ROOT_URL}/${imageUrl}`}                        
    />
    <p className='item-description__text'>
        {body}
    </p>
</div>

Let's log in, go to requests, and it looks like we got an error. The same thing is happening with our newsletter. What's happening is there's probably an error on the back-end or something like that.

I need to check what's going on back there because that's not something on our front-end most likely. I'll find out. What we did get done is that we got all of our items, so that's good. We're displaying it in here. It looks like it actually is here. It looks like one of them displayed correctly.

It looks like only two of our urls didn't work, so it looks like there's a problem there. That's a back-end thing. I actually know exactly why. It's because I had 2 of these items or at least 1 of these items containing an image that I deleted.

All of the images that we've uploaded are working here, so that's awesome. That's working exactly like I expected and that should be good. It even adjusts to the size of the image, so everything's good there. That's looking good.

What we need to do now is we need to get the right data in here. We need to get the right amount in here, and then we need to display it based on the status. After that, we just need to be able to switch the statuses through an endpoint.

Let's go ahead and commit our code, and then in the next video, we'll talk about that. Let's say git status, git add ., and let's say git commit -m "mapped over item data to requestsitem component".

Resources

• Source Code