A component for visualizing diffs on objects

_implementation.js

import React from "react";
import DiffView from "./DiffView";

const from = {
  fruit: "apple",
  drink: { featured: "coffee" }
};

const to = {
  fruit: "orange",
  drink: { featured: "coffee" }
};

function parseKey(key) {
  return `My ${key}`;
}

function parseValue(key, value) {
  switch (key) {
    case 'drink':
      return value.featured;
    default:
      return value;
  }
}

const App = () => ({
  <DiffView
    from={from}
    to={to}
    parseValue={parseValue}
    parseKey={parseKey}
  />
});

export default App;

DiffView.js

import React from "react";

const groupDiffs = (from, to, parseValue, parseKey) => {
  return mergeKeys(from, to).reduce((groups, key) => {
    const group = groupFn(key, from[key], to[key]);
    
    const name = parseKey ? parseKey(key) : key;
    const from = parseValue ? parseValue(key, from) : from;
    const to = parseValue ? parseValue(key, to) : to;

    return [
      ...groups,
      {
        name,
        from,
        to,
        changed: from !== to
      }
    ]);
  }, []);
};

const DiffView = ({ from, to, parseValue, parseKey }) => {
  const groups = groupDiffs(from, to, parseValue, parseKey);

  return (
    <ul>
      {groups.map(group => (
        <li key={group.name}>
          <h3>{group.name}</h3>
          <div style={group.changes ? { color: "red" } : {}}>{group.from}</div>
          {group.changes && (
            <div style={group.changes && { color: "green" }}>{group.to}</div>
          )}
        </li>
      ))}
    </ul>
  );
};

DiffView.propTypes = {
  /* Baseline object */
  from: PropTypes.object,
  /* Comparison object */
  to: PropTypes.object,
  /* Function used to transform each individual value in the object */ 
  parseValue: PropTypes.func,
  /* Function used to transfrom each individual key in the object */
  parseKey: PropTypes.func
};

export default DiffView;

mergeKeys.js

/**
 * Combines n objects' unique keys together into a single array.
 */
function mergeKeys(...objs) {
  const objKeys = obs.map(o => Object.keys(o))
  return [...new Set(objKeys)];
};