How to Map a Newsletter JSON Object to the Newsletter Latest Component

So I'm going to open up our code to newsletterGrid.js let's go ahead and pass in some data through props to our NewsletterLatest component. Eventually we'll get the data through redux, but for now we'll just hard-code it.

newsletterGrid.js

class NewsletterGrid extends Component {
    render() {

        const latest = {
            title: 'Happy Holidays Fam',
            body: 'is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum',
            date: new Date(),
            imageUrl: 'http://via.placeholder.com/960x258'
        }

        return (
            <div className='newsletter-grid'>
                {/* add button */}
                <NewsletterBox date={new Date()}/>
                <NewsletterArchive/>
                <NewsletterLatest/>
            </div>
        )
    }
}

So have a title, body, date, and image that we're putting in. Normally this will be the data that will come from our server, but we'll have this for now. I have a program called Postman open that will show my server, and we need to have all of the properties listed except for the "__v" because that's just something MongoDB does, and it doesn't really matter.

large

Let's add in our id.

newsletterGrid.js

        const latest = {
            _id: '115',
            title: 'Happy Holidays Fam',
            body: 'is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum',
            date: new Date(),
            imageUrl: 'http://via.placeholder.com/960x258'
        }

Notice how our id is underscored. It's because MongoDB generates ids like that when you have a schema. It makes an underscore automatically for the id and it generates an _id with every schema file you make.

Now let's go ahead and let's throw this into our <NewsletterLatest/> with the spread operator. We don't want to have to manually extract each piece of data.

newsletterGrid.js

        return (
            <div className='newsletter-grid'>
                {/* add button */}
                <NewsletterBox date={new Date()}/>
                <NewsletterArchive/>
                <NewsletterLatest {...latest}/>
            </div>
        )
    }
}

Now we could pass the data in manually, but it just depends on what your want to do. OK let's open up our newsletterLatest.js and all we really need to use is the title.

newsletterLatest.js

class NewsletterLatest extends Component {
    render() {
        const { title, imageUrl, body } = this.props; 
        return (
            <div className='newsletter-latest'>
                <h1 className='newsletter-latest__title'>{title}</h1>
                <img className='newsletter-latest__image' src={imageUrl}/>
                <div className='newsletter-latest__body'>
                    <p>{body}</p>
                </div>
            </div>
        )
    }
}

So you can see that instead of typing this.props on each item, we connected them all to a constant with a call to this.props, which will pass it to all of our properties. This will be really helpful once we once we actually connect this with redux and have it fetching items because it will automatically be set up for us. All we need to do is basically provide our props and mapStateToProps.

So at this point you might have a decent understanding of where this could be going. I just really want you to understand how we'll be doing later on. Let's see what it will look like.

newsletterLatest.js

function mapStateToProps(state) {
    return {
        state.title,
        state.imageUrl
    }
}

So it's going to be cool, and that will map our server data into our props, but let's just get rid of that for now. I just wanted to give you a glimpse into where this is going.

So I think that's all we need for the latest. There's one other thing though and that's the edit button. We need this button. So we also need the plus button up at the top to add a new newsletter. So let's end the video here and in the next video we'll develop the edit button we will place it on the newsletter and then we will do the plus button.

So let's commit our code.

git status
git add .
git commit -m "mapped over a newsletter JSON item to the latest newsletter component"

Resources

Code at this stage