Let's go to the icon in our CSS and let's just change the font-size to like 2.7rem. Let's go up a bit and let's just change that icon column to like 100px, and see what that looks like. That looks a bit better.

Now I'm going to open up chrome, so that's a lot cleaner. What we want to do now isimplement this dropdown functionality. We're going to be doing that using a library called react-animate-height. Go ahead and type in your terminal npm install --save react-animate-height.

Now what this is is it's an NPM package that we're going to use to easily implement this in our Javascript. Go ahead and hit return and install that. I'm going to head over to Chrome and while it's installing I'm going to google it. It's the www.npmjs.com.

We've obviously used this before. We used it in the last application, and we want to use it again because it's a nice little npm package that helps a lot. It's hard to imagine that it gets 10,000 weekly downloads. That's a ton of people. We basically want to do this right?

We've already done this before, so I'm not going to talk about this too much. All the instructions are here anyway, and it's a really simple library so I'm not going to explain it in detail. Let's focus on getting this animation in so we can make our app functional.

So we have it installed, now we just have to import it. You can copy this import so we don't have to type it out. I'm going to go into our requestsItem.js, and at the top here, let's just import it.

requestsItem.js

import Button from '../button';

import AnimateHeight from 'react-animate-height';

Now what we want to do is use it. We want to use it on our description. One thing we could do is wrap it around the entire description, or we could just wrap it around these items. Let's just mess around with it, and see what works best. I'm going to wing it.

Let's say <AnimateHeight> and we want to give it some options right. We want to close it after our div. Then let's just tab everything in a bit. So I just wrapped it with <AnimateHeight>.

Now let's give him some options. Let's say:

requestsItem.js

<div className='requests-item__description'>
        <AnimateHeight
            duration={300}
            height={'auto'}
        >

All that we've done in this video so far is npm install for react-animate-height, then we imported it at the top here, and then I enclosed our description with an instance of it. Let's check it out. Let's go to our application, and you'll see it's really messed up now.

Let's just say instead of auto lets say let's say something like 100 and see what that looks like. Technically, this description is no longer a part of our grid because it's no longer directly in request-item. What we need to do is take this AnimateHeight, and place it inside of the div.

Let's tab this over and clean it up a bit. Let's tab it all back a bit. There we go. Case law done is replace the div and the AnimateHeight. I just swapped those.

Let's go to the browser and let's check it out. You'll see that it's looking pretty good now, except for our grid is kind of jacked up. That's because we no longer have a grid in here. The reason we don't have a grid in here is because AnimateHeight is a direct child of requests-item__description.

This grid is no longer going to work on this. What we need to do is take this and wrap it with this div again. We could give it a different name, but we're not going to. I'm just going to take this div, and put it down here as well. That way we can still get our grid.

You'll see it's working now, and there's nothing wrong with it.

That's with a 100px height. Let's go ahead and change that height to auto and see how that affects it. You'll see it's looking good. Basically, the idea here is when we click on this we want to switch from auto and 0, because with 0 it's obviously going to be closed. See it's gone?

We'll have to adjust the grid a bit. So let's go ahead and try that out. Let's say:

requestsItem.js

<div className='requests-item__description'>
    <AnimateHeight
        duration={300}
        height={this.state.height}
    >

and then go up here and write a constructor.

requestsItem.js

    constructor() {
        super()

        this.state = {
            height: 0
        }
    }

Now if we go in here, it's just not going to show. If we change it to auto it will show because it's referencing this.state.height. So it shows when it's auto and it does not show and it's 0. Let's try putting something like 30 and you see how that affects it.

You'll see it kind of shows it, but it's not good. You'll see that it's directly centered. You already know that when we do this it's going to animate it from the top and the bottom, and kind of squeeze it together, like when you zoom in or zoom out on your phone. That's kind of how it works.

Let's change this back to 0, and let's write a function that will change it back and forth from 0 to auto. Let's say:

requestsItem.js

    toggleDropdown = () => {
        if(this.state.height == 0) {
            this.setState({height: 'auto'})
        } else {
            this.setState({height: 0})
        }
    }

Now we just have to hook it up. Let's go down here, and let's say that when we click on this arrow, we want that to occur. Now, we don't really have a callback in this arrow so let's click into icon.js and let's develop that.

We have to modify our icon component to take in a callback. Let's say:

icon.js

import React from 'react';

export default function Icon({className, icon, callback}) {
    return (
        <a onClick={callback} className={className}>
            <i className={icon}></i>
        </a>
    )
}

That way we can pass in an optional callback for our icon. To give it some functionality if we want. All I did in here was add in another prop called callback and use it in here onClick. I changed this div to a-tag.

So we made three changes in this file. Get that in, and then let's go use a callback. Let's close this file, and let's go into our requestsItem.js here and say:

requestsItem.js

<Icon callback={() => this.toggleDropdown()} className='requests-item__title__arrow' icon='fas fa-sort-down'/>

We're going to have to call it within our function, so we're going to put an arrow function here because technically, callback is a function. We don't want to pass in this directly to the icon. We want to pass in an arrow function that calls this function.

Let's try this out now. Go to requests and you'll see it animates our height. There's one more problem with this and it's obviously the height here. We're animating the description and icon height, except for the entire column remains unchanged. We need to get that down as well.

Let's commit our code and do that in the next video. Let's say git status, git add ., and let's just say git commit -m "installed react-animate-height and modified icon component to take in a custom callback for added functionality". That should be good. Let's push our code, and I'll see you in the next video.

Resources

• Source Code -React-Animate-Height