CSS layout and React.Fragment

Still banging on this dumb dashboard project. I wrapped a bunch of rectangles with a parent grid-container, but I was getting one rectangle too many. Oh hey, the box that should have a YouTube embed and a list of links underneath… uh.. doesn’t. The “playlist” is showing up as its own rectangle - a sibling div to the YT player. They’re imported from a single component though!

(Opens that component file.)

Ooh, right. Instead of wrapping the player and the playlist in an otherwise-meaningless div, I wrapped them with React’s Fragment thing-o. The fragment ‘disappears’ in the layout so the two divs inside it get treated as siblings by the grid.

Obvious, now, but a funny little thing I hadn’t noticed before.

This entry was posted on May 05, 2019 with tags