What are two arrows in a function in higher order function in React Javascript

Question

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 component is a function that takes a component and returns a new component.

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>

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
– Derek, Commented Jan 19, 2020 at 5:27

Drew Reese · Accepted Answer · 2020-01-19 04:40:28Z

3

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

Perhaps it is better illustrated broken down a bit.

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

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

edited Jan 19, 2020 at 4:40

answered Jan 19, 2020 at 4:31

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammed Anees · Accepted Answer · 2020-01-19 06:53:41Z

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

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 component 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 component which is the function that is returned from the HOC which is equivalent to

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

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

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

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

Mr Lister · Accepted Answer · 2020-01-26 09:52:10Z

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

your base base component 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 component 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 compent as argument and returns another React component. 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 component 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 component <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.

Collectives™ on Stack Overflow

What are two arrows in a function in higher order function in React Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related