frivolta

const App = (props) => {
  return (
    <div className="App">
      <h1>A component: {props.title}</h1>
      <h2>User: {props.customUser.email}</h2>
    </div>
  );
};
export default compose(withUser, withTitle)(App);

frivolta

export const withTitle = (Component) => (props) => {
  const title = "Custom title";
  return <Component title={title} {...props} />;
};

frivolta

// A page component that just render text
const App = (props) => {
  return (
    <div className="App">
      <h1>A component</h1>
      <h2>User: {props.currentUser.email}</h2>
    </div>
  );
};
// Wrapping with withUser function

frivolta

export const withUser = (Component) => (props) => {
  // Passing the user that you fetched 
  const currentUser = { authtenticated: true, email: "email@email.com" };
  return <Component currentUser={currentUser} {...props} />;
};

frivolta

// A page component that just render text
const App = (props) => {
  return (
    <div className="App">
      <h1>A component</h1>
    </div>
  );
};
export default App;

frivolta

// We first define the function we will be using as an argument
const addOne = (arg)=>arg+1

// We than define our hof
const higherOrderFunction = (fn, arg) => fn(arg)*2
 
// The result will be 12
higherOrderFunction(addOne, 5)

frivolta

// Result is [2,3,4]
[1,2,3].map((number)=>number+1)

// Note that you can extract the callback function and pass it to the map function:
function addOne(arg){
    return arg+1
}

[1,2,3].map((number)=>addOne(number))
// or

frivolta

const multiply20 = (price) => price * 20;
const divide100 = (price) => price / 100;
const normalizePrice = (price) => price.toFixed(2);
const addPrefix = (price) => "$" + String(price);

const pipe =
  (...fns) =>
  (x) =>
    fns.reduce((res, fn) => fn(res), x);
const compose =

frivolta

const pipe =
  (...fns) =>
  (x) =>
    fns.reduce((res, fn) => fn(res), x);

frivolta

const addPrefix = (price) => "$" + String(price); //$ 40.00
const discountWithPrefix = compose(
  addPrefix,
  normalizePrice,
  divide100,
  multiply20
);
discountWithPrefix(200.0); // '$40.00'