Using common code inside a Higher Order Component I have a common List in mind which looks something like this:

 

it has one remove button

one input in which user can enter the name of element and on clicking insert the element will be added in the list.

For this i have added HOC like this:

function ListHOC(Component, data, listName, placeholder) {
  return class extends React.Component {
    constructor() {
      super();
      this.state = { data, element: "" };
    }

    add = item =&gt; {
      const { data } = this.state;
      data.push(item);
      this.setState({ data });
    };

    remove = keyToRemove =&gt; {
      const { data } = this.state;
      const newData = data.filter(({ key }) =&gt; keyToRemove !== key);
      this.setState({ data: newData });
    };

    render() {
      const { data, element } = this.state;
      const updatedList = data.map(({ name, key }) =&gt; (
        &lt;div style={{ display: "flex" }} key={key}&gt;
          &lt;div&gt;{name}&lt;/div&gt;
          &lt;button onClick={() =&gt; this.remove(key)}&gt;remove&lt;/button&gt;
        &lt;/div&gt;
      ));
      return (
        &lt;&gt;
          &lt;div&gt;{listName}: &lt;/div&gt;
          &lt;Component data={updatedList} {...this.props} /&gt;
          &lt;input
            placeholder={placeholder}
            onChange={e =&gt; this.setState({ element: e.target.value })}
          /&gt;
          &lt;button
            onClick={() =&gt; this.add({ name: element, key: data.length + 1 })}
          &gt;
            insert
          &lt;/button&gt;
        &lt;/&gt;
      );
    }
  };
}


one thing i am not sure about is weather to use the input and button and listname inside HOC or not 

link to codepen: https://codepen.io/saxenanihal95/pen/NWKVJOx?editors=1010
There's no reason to use a HOC for this, it can be done more simply and clearly with a component:

class List extends React.Component {
  state = { data: this.props.initialData, element: "" };

  add = item =&gt; {
    this.setState(prev =&gt; ({ data: prev.data.concat(item) }));
  };

  remove = keyToRemove =&gt; {
    this.setState(prev =&gt; ({
      data: prev.data.filter(({ key }) =&gt; keyToRemove !== key)
    }));
  };

  render() {
    const { data, element } = this.state;
    const { placeholder, listName } = this.props;

    return (
      &lt;&gt;
        &lt;div&gt;{listName}: &lt;/div&gt;
        {data.map(({ name, key }) =&gt; (
          &lt;div style={{ display: "flex" }} key={key}&gt;
            &lt;div&gt;{name}&lt;/div&gt;
            &lt;button onClick={() =&gt; this.remove(key)}&gt;remove&lt;/button&gt;
          &lt;/div&gt;
        ))}
        &lt;input
          placeholder={placeholder}
          onChange={e =&gt; this.setState({ element: e.target.value })}
        /&gt;
        &lt;button
          onClick={() =&gt; this.add({ name: element, key: data.length + 1 })}
        &gt;
          insert
        &lt;/button&gt;
      &lt;/&gt;
    );
  }
}

const Users = () =&gt; (
  &lt;List
    initialData={[
      { name: "a", key: 1 },
      { name: "b", key: 2 }
    ]}
    listName="Users"
    placeholder="insert user"
  /&gt;
);
const Comments = () =&gt; (
  &lt;List initialData={[]} listName="Comments" placeholder="insert comment" /&gt;
);
const AnotherList = () =&gt; &lt;Users /&gt;;

function App() {
  return (
    &lt;div&gt;
      &lt;Users /&gt;
      &lt;Comments /&gt;
      &lt;AnotherList /&gt;
    &lt;/div&gt;
  );
}

ReactDOM.render(&lt;App /&gt;, document.getElementById("app"));


HOCs are generally better for cross-cutting concerns, or behavior (not presentation) which you want to add to any component. for example logging:

const withLogging = Component =&gt; props =&gt; {
  console.log('Props:', props);
  return &lt;Component {...props} /&gt;;
}

const List = ({ name, data }) =&gt; ...
const ListWithLogging = withLogging(List); // &lt;-- This will log all props