What I learned today about CSS and React.js

Today, among other things, I needed to render a scrolling div element such that the scrollbar was at the bottom of the element.

I found a nice pure CSS solution from Stack Overflow, albeit one that needed a crucial assist from the comments section:

    max-height: 470px;
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;

flex-direction: column-reverse was the find.

However, upon re-rendering the element (say, upon navigating away from and back to the route), the scroll bar would stay where the user had last left it, whereas I wanted return the scroll bar to the bottom. The component needed to be completely unmounted. That's when a new-to-me bit of React.js trivia came in: if you change the value of a component's key prop, you can force an unmount. That was the ticket, here.

Knowing one's tools is good.


Later, after cleaning this up (December 17, 2023): I'm not an adept of the bullet journal, nor do I find it easy to "learn in public," but upon reflection, both of those learning paradigms showed up in this end-of-day reflection. I'm an inveterate reviser and obstinate curator, so it took a little mental effort to post something that took me fifteen minutes to write. Do posts like this have value? Do they belong here?

The ending sentence, a truism that's a bit facile as a conclusion, points up how much one (at any given point) doesn't know about one's tools. Nonetheless, the knowledgeable people I've met (across many disciplines) are often unusually humble and skilled at asking questions when confronted by gaps in understanding (whether in a conversation or a codebase). I want to be like that! To that end, it's worth practicing confronting one's own gaps, and a public in which one "learns" need not always be one of the publics of Web 2.0. I think that makes the most sense of the "value" of something like this, written off-the-cuff, a memory and an aid to memory. There's something to be said for spots like these in the commonplace book.