 So now we have one component rendered two ways. The first one was our initial expectation where it has a lot of content and we're rendering less, but the second one now has like hardly any content at all and this button doesn't do anything. So let's look at the ways that we can not render it. Okay, so logically what we wanna do is anytime content height isn't larger than this 100 pixel threshold, we don't wanna render this button. We can do that a couple of ways. There's a short circuit operator in JavaScript that we can use. So if content height is greater than 100, we can and and use the and logical and operator to say this should only be rendered if the content height is greater than 100. Let's see if that works right off the bat. Yes, it does. So hi, there is our second one and then this one still, you know, show more, show lesses. Now there is a problem with this and it happens sometimes with arrays. We go check an array, but you don't like make sure that the length is more than one. You just say like, hey, if there's an array and it will result in zero. And so when we have zero, it's gonna render the zero and not fail and not render the button. So it just is like, yeah, zero is chill. So a lot of people feel like it's always better to use the conditional or ternary operator. I don't really prescribe to always and never in programming, but if you want to use the ternary operator, this is how you do it. You're going to say in this case, in the positive case, we want to render this thing. And then in the negative case, we're gonna render null. So let's get this back on track with content height is greater than 100 pixels. Now we have the same thing, but we are using null, null, null in our, to render nothing in this case. Now, because we're here, I'm gonna talk about something in the React docs that I do find a little bit weird. I spent a lot of time talking about how you can extract this whole thing into a component. This would then take two props and an ideal world would probably put this in context so we don't have to kind of make this special API for this button. But this is part of the reason that I hate this suggestion so much. So we take these as props. Now we have to add those props to our components. So we'll say show more button expanded, set expanded. And then we would use this, this like root level like return. Like if it's expanded null, and then if not, then return the other thing. What do we get? This fail. You know what, I'm not even gonna bother fixing this because I think that this already showcases why I think this is a bad idea. I don't think that you should have to shovel these props everywhere if you can handle the condition inside of the component that you're rendering. And also like this whole like maybe render, maybe don't doesn't make any sense to me to have at the root of all of these components. Cause I feel like it's just a poison that just goes everywhere. But I do like a block level if else, et cetera. If you're doing like a bunch of different possible renderings of a component and they vary wildly. I don't know, I just don't like this. So let's just get it out of there. Now that we have this all reasonable again, I wanna show you another problem that we need to solve. As we change our window size, well the scroll height of our element also changes. That's not a huge problem in this case where the button already exists. But let's take one of these paragraphs out. Delate might have to delete a little bit more. Delate, if we do this, well that's actually less than our 100 pixel threshold, but it took us clicking on the button for it to actually disappear. That's kind of a weird experience. And then if we shrink this, well now it's over our 100 pixel threshold, but we have no way of activating it, except to refresh. For this you're gonna need another use effect that actually observes state changes in the browser size. Good luck, I'll see you for this solution tomorrow.