Following is an example HOC function I am looking at but didn't get its meaning in terms of two arrows specially the second one where we are de structuring children and props.

const HOCFunction = (PassComponent) => ({children, ...props}) => {
  return (<PassComponent {...props}>
    {children.split("").reverse().join("")}
  </PassComponent>)
}

From the definition mentioned on React docs:

Higher-order ponent is a function that takes a ponent and returns a new ponent.

So what exactly this second params is for?

Whole code:

const reverse = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.split("").reverse().join("")}
    </PassedComponent>

const name = (props) => <span>{props.children}</span>
const reversedName = reverse(name)
<reversedName>Hello</reversedName>

Following is an example HOC function I am looking at but didn't get its meaning in terms of two arrows specially the second one where we are de structuring children and props.

const HOCFunction = (PassComponent) => ({children, ...props}) => {
  return (<PassComponent {...props}>
    {children.split("").reverse().join("")}
  </PassComponent>)
}

From the definition mentioned on React docs:

Higher-order ponent is a function that takes a ponent and returns a new ponent.

So what exactly this second params is for?

Whole code:

const reverse = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.split("").reverse().join("")}
    </PassedComponent>

const name = (props) => <span>{props.children}</span>
const reversedName = reverse(name)
<reversedName>Hello</reversedName>

• javascript
• reactjs
• arrow-functions
• higher-order-ponents

• it's simply a function that returns another function. the returned function has access to the param(s) in the outer function. this function chaining can be as deep as necessary in order to return a final function that has specific values for parameters at any level – Derek Commented Jan 19, 2020 at 5:27

3 Answers 3

HOCs, defined like this, are really just higher order functions. Functions that return functions. In this case the first function accepts a react ponent to decorate, and returns a functional ponent whose parameters are the props of the ponent that will ultimately be used.

Perhaps it is better illustrated broken down a bit.

// decorate some passed ponent
const reverse = (PassedComponent) => {
  // define a new functional ponent
  const WrappedComponent = ({ children, ...props}) => {
    ...
    return (
      <PassedComponent {...props}>
        {children.split("").reverse().join("")}
      </PassedComponent>
    );
  }

  // return new wrapped ponent with reversed children
  return WrappedComponent;
}

Higher-order ponent is a function that takes a ponent and returns a new ponent.

Lets break down your code to understand what are the two functions, props and children are

const Name = (props) => <span>{props.children}</span>

Name is simply a function ponent now, so calling it like

<Name>Stack OverFlow<Name/>

will render <span>Stack OverFlow</span> to the dom.

Now lets look at the hoc,

const reverse = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.split("").reverse().join("")}
    </PassedComponent>

reverse is simply function returning another function. The good old way to write it is

var reverse = function reverse(PassedComponent) {
  return function (props) {
    var children = props.children,
        propsWithoutChildren = _objectWithoutProperties(props, ["children"]); //some function to remove children from props

    return (
      <PassedComponent {...propsWithoutChildren}>
        {children.split("").reverse().join("")}
      </PassedComponent>
     )
  };
};

Now when you call const reversedName = reverse(name), reversed name will be a new ponent which is the function that is returned from the HOC which is equivalent to

const ReversedName = ({ children, ...props }) =>
  <Name {...props}> //the ponent you passed is used here
    {children.split("").reverse().join("")}
  </Name>

Passing {...props} allows you to pass any additional props to the name ponent. For eg, if you use the reversed name like this,

<ReversedName className='class-for-name-ponent'>name</ReversedName>

the className prop will be passed down to the name ponent. The whole idea is enabling reusability, as here you are rendering the same ponent Name to render name in both straight and reversed format. Hope this helps.

First of all your code is syntactically wrong. becasue a React Component name should start with Capital Letter. now,

your base base ponent is something like this.

const Name = props => <span>{props.children}</span>;

it takes Props object as input, which contains children with property nae children. console log the following,
<Name>Hello</Name> in you will get

props: {children: "Hello"}

so Name ponent takes props object which contains children , that is string and includes it using {props.children}

now HOF is a function that takes a fucntion as argument and returns another function. in React language it is named as HOC,is a function which takes a React pent as argument and returns another React ponent. to avoid spread operator confusion you can modify reverse as following.

const reverse = PassedComponent => props => {
  return (
    <PassedComponent>
      {props.children
        .split("")
        .reverse()
        .join("")}
    </PassedComponent>
  );
};

const ReversedName = reverse(Name);

in above code returned ponent from HOC takes props as input object. so here <ReversedName>Hello</ReversedName> , Hello will go as props.children. so it reverses props.children and pass it as children to passed ponent <Name>. so it converts as following.

<Name>"olleH"</Name>, which will appended inside <span> tag and be displayed on screen.

so my advice is to learn to log any JSX ans see how the object is structured which will avoid all the props children confusion and improve your react knowledge.