React: Spreadish Alternative for Attributes

-
This is legal:

<Foo {...object_with_multiple_props} />

Comments

Post a Comment

Popular posts from this blog

React/JSX: One way to store an HTML entity as data

-
For security, React/JSX escapes string data which you try to display {likeThis} . And often, this is what we want. But I was using the HTML entity  &#402;   as a sign for a fictional unit of money, the "Florin", in a game I was writing and it was all over the place. So I wanted to create a constant for it. (In case anyone cares,  it's a "Latin Small Letter F With Hook", like this: "ƒ" .) But if I did: export const FLORIN_MARK = ' &#402; ' ...and then imported it and tried to use it in some JSX like... { place . fuelPrice } { FLORIN_MARK } ...JSX escaped the characters in the HTML entity so that what finally displayed was "123  &#402; " I found a couple of possible work-arounds here  https://zhenyong.github.io/react/docs/jsx-gotchas.html But none worked for me. HOWEVER, since I never had to do any string operations on the HTML entity before displaying it, the constant could just go all the way and...
Read more

box-shadow

-
box-shadow: [inset] x-offset y-offset [ blur-radius  [ spread-radius ]] [ color ] ; With all zeros, the shadow is exactly under the box. So it's hidden. The x and y offsets are like relative positioning. Take the shadow defined by any other parameters, and just move it. Blur comes first, but I'm going to talk about spread first. Spread-radius extends the shadow outward in all directions by some distance. With blur radius still set to zero, a sharp edged shadow extends outward from the box for the given distance. (It looks like a border.) For blur-radius, take a shadow with an hard edge defined according to your spread-radius. And then "fuzz" outward, putting down some color where there had been none. And fuzz inward, lightening the shadow at its old edge, and letting it darken toward it's actual color setting as you move in from . its old edge. Finally "inset" puts the shadow inside the box, instead of outside. Commas!!! Don't put co...
Read more

Notes on Javascript async and await

-
MDN has a very good page on async (and await ) . Having read them the MDN page plus a bunch of other tutorials, here are my key takeaways: In general: async and await are just a nicer syntax for working with promises. So learn promises. Understand promises. And then use async and await to make your promise-using code look nicer. About async : Putting async  in front of a function definition allows you to use await inside that function. Putting async in front of a function definition  also wraps the function's return value in a promise, if the return value wasn't a promise already. So if my function gets data via a promise and then extracts and transforms the data before returning it,  I can just return my transformed data and let async magically re-promise-ify the data for me. :-) About await : await lets me use functions that return promises, but write code that looks synchronous, i.e.the code looks as if the function that returns a promise was an old fa...
Read more