undefined | Better HN

0 pointsserverholic4y ago0 comments

Yeah just use the index of the card. For example:

cards.map((card, i) => {

  const isLast = i === cards.length - 1

  const className = "card" + isLast ? '' : 'card-margin'

  return <Card className={className}  />

)}

The nice thing about this is you have a full programming language at your fingertips. You could do something with every even card, ever prime number card, etc.

0 comments

extra884y ago

Just because you can do everything in JavaScript doesn't mean you should. The equivalent CSS is a lot shorter and more performant.

> every prime number card

You got me, CSS alone can't select only primes.

serverholicOP4y ago

The performance difference is negligible. If you add a new card to the list then react is going to add/remove a couple CSS classes. Completely negligible.

Plus you're going to need this approach anyway if you want to do any more advanced logic like maybe you have a list of users and you want to color them based on some status.

With this method you have the above logic all in one place and in one language. After having used traditional CSS with selectors vs this method I really can't go back.

extra884y ago

You may need the .map() for styling based on status but

  const isLast = i === cards.length - 1
  const className = "card" + isLast ? '' : 'card-margin'

Seems funny to argue for JavaScript's simplicity while using .map() and an anonymous callback function; a good ol' for loop would make it more clear what's happening.

> all in one place and in one language

That seems like the real reason, keeping to one language.

I think following the rule of least power [0], having HTML semantics do what it's good at, CSS what its good at, and JavaScript for the rest is best for robust and performant outcomes.

  <Card className={className}  />

I only have a little experience with React and that was a while ago, can you not have the Card typed as an Element to use `Card.classList.add(className)`?

[0] https://en.wikipedia.org/wiki/Rule_of_least_power

1 more reply

112358132134554y ago

you're missing parens: "card" + (isLast ? '' : 'card-margin') // ternary has a very low precedence https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

or `card ${isLast ? '' : 'card-margin'}`

j / k navigate · click thread line to collapse

0 pointsserverholic4y ago0 comments

Yeah just use the index of the card. For example:

cards.map((card, i) => {

  const isLast = i === cards.length - 1

  const className = "card" + isLast ? '' : 'card-margin'

  return <Card className={className}  />

)}

The nice thing about this is you have a full programming language at your fingertips. You could do something with every even card, ever prime number card, etc.

0 comments

extra884y ago

Just because you can do everything in JavaScript doesn't mean you should. The equivalent CSS is a lot shorter and more performant.

> every prime number card

You got me, CSS alone can't select only primes.

serverholicOP4y ago

The performance difference is negligible. If you add a new card to the list then react is going to add/remove a couple CSS classes. Completely negligible.

Plus you're going to need this approach anyway if you want to do any more advanced logic like maybe you have a list of users and you want to color them based on some status.

With this method you have the above logic all in one place and in one language. After having used traditional CSS with selectors vs this method I really can't go back.

extra884y ago

You may need the .map() for styling based on status but

  const isLast = i === cards.length - 1
  const className = "card" + isLast ? '' : 'card-margin'

Seems funny to argue for JavaScript's simplicity while using .map() and an anonymous callback function; a good ol' for loop would make it more clear what's happening.

> all in one place and in one language

That seems like the real reason, keeping to one language.

I think following the rule of least power [0], having HTML semantics do what it's good at, CSS what its good at, and JavaScript for the rest is best for robust and performant outcomes.

  <Card className={className}  />

I only have a little experience with React and that was a while ago, can you not have the Card typed as an Element to use `Card.classList.add(className)`?

[0] https://en.wikipedia.org/wiki/Rule_of_least_power

1 more reply

112358132134554y ago

you're missing parens: "card" + (isLast ? '' : 'card-margin') // ternary has a very low precedence https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

or `card ${isLast ? '' : 'card-margin'}`

j / k navigate · click thread line to collapse