Using common code inside a Higher Order Component

Question

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 => {
      const { data } = this.state;
      data.push(item);
      this.setState({ data });
    };

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

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

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

Answer 1

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 => {
    this.setState(prev => ({ data: prev.data.concat(item) }));
  };

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

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

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

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

function App() {
  return (
    <div>
      <Users />
      <Comments />
      <AnotherList />
    </div>
  );
}

ReactDOM.render(<App />, 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 => props => {
  console.log('Props:', props);
  return <Component {...props} />;
}

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