title: What are two arrows in a function in higher order function in React Javascript
body: <p>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.</p>
  
  <pre><code>const HOCFunction = (PassComponent) =&gt; ({children, ...props}) =&gt; {
    return (&lt;PassComponent {...props}&gt;
      {children.split("").reverse().join("")}
    &lt;/PassComponent&gt;)
  }
  </code></pre>
  
  <p>From the definition mentioned on React docs:</p>
  
  <blockquote>
    <p>Higher-order component is a function that takes a component and returns a new component.</p>
  </blockquote>
  
  <p>So what exactly this second params is for?</p>
  
  <p>Whole code:</p>
  
  <pre><code>const reverse = (PassedComponent) =&gt;
    ({ children, ...props }) =&gt;
      &lt;PassedComponent {...props}&gt;
        {children.split("").reverse().join("")}
      &lt;/PassedComponent&gt;
  
  const name = (props) =&gt; &lt;span&gt;{props.children}&lt;/span&gt;
  const reversedName = reverse(name)
  &lt;reversedName&gt;Hello&lt;/reversedName&gt;
  </code></pre>