0

I am having hard time figuring out the use of High Order component.

I got the theoretical part that they wrap other elements to add functionality and code repetition but I don't understand how they work.

For example here is a simple HOC component I created 

import React from 'react';

const withClass = (props) = {
  return (
    <div className={props.classes}> {props.children}
    </div>
  )
}

export default withClass;

And imported on two places in my container (We can import it in component as well?) 

import withClass from '../hoc/withclass.js';

<withClass className={classes.App}>
  <button onClick={this.showPersonTrueHandler}>Show Persons </button>
  <Ccockpit
  coatiitle = {this.props.title}
  cocPersonState = {this.state.showPerson}
  cocperson = {this.state.person.length}
  toggler = {this.togglerPersonHandler} />
  {person}
  </withClass>

Now, Previously I have learned that we use props to pass properties from parent element to child element? so this means we will have classes.App passed to HOC component and the content inside WithClass Tag as props.child

But I don't get it, why exactly do we do it? and what happens when HOC component receives props.class and props.child?

  • The component that you have is not an HOC, but a functional React component. – Shubham Khatri Apr 26 '18 at 12:02
  • `and what happens when HOC component receives props.class and props.child` If you pass a children prop to the component, that prop is overwritten by the content within tags – Shubham Khatri Apr 26 '18 at 12:05

0 Answers0