Resisting Higher Order and accepting Functional – Hacker Noon

Rendering data

What is react?

A JavaScript library for building user interfaces —

Although React is for building data view (or user interfaces), it must mingle with data, in some form, at times. And when it does, almost always the data is tightly coupled with the the interface code.

Wouldn’t it be great if we could just pack our views in a separate box and just sprinkle the data as and when needed?

A box called “Comp”

This code is from the talk “Oh Composable World!” by Brian Lonsdorf. If you haven’t seen it yet, I encourage you do so before continuing.

Oh Composable World! @ 21:40

If you haven’t seen the talk, here’s the gist of the code snippet you see above:

The Comp function takes in a react component (as the argument g) and returns an object with methods fold and contramap.

The fold method is the component originally passed to Comp. This means that calling fold is just like calling Foo or rendering . After all, the following expressions give equivalent values.

  • Foo({ fizz: "buzz" })
  • Comp(Foo).fold({ fizz: "buzz" })

The contramap method is a bit tricky. It takes in some value and returns another value. The returned value is then fed into the original react component for rendering as a prop. Basically, contramap transforms the input of the component function, i.e., it modifies the input.

To highlight the contramap behaviour, let’s modify the code:

Now, the Heading component accepts an object — the props object — and returns some JSX. This follows react’s definition of a functional component.

read original article here