ReactJS table diff span highlight toggle

The main ideas here are to use state to control how the HTML is structured (as per (what I think is) standard React) and to have a component for each row so that each row can figure out the diffs and the elements each row should have.

The 'DiffRow's could be the result of a map over some set of row data.

I've not looked into how to use Diff to achieve exactly what you want, this just takes the example use of Diff you gave and them finds out the diff for each cell after the first, to the first and adds spans with classes for the things Diff has mentioned.

For some reason importing Diff didn't seem to work, so I required it instead.

https://codesandbox.io/s/compassionate-yalow-th57n?file=/src/Home.js

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

const Diff = require("diff");

const diff_part_class_name = (part) =>
  part.added ? "added" : part.removed ? "removed" : "default";

const diff_cells = (cells) => {
  const [first_cell, ...other_cells] = cells;

  return [first_cell].concat(
    other_cells
      .map((content) => Diff.diffChars(first_cell, content))
      .map((diffed) => (
        <>
          {diffed.map((part, index) => (
            <span key={index} className={diff_part_class_name(part)}>
              {part.value}
            </span>
          ))}
        </>
      ))
  );
};

const DiffRow = ({ data, show_diff }) => {
  const cell_data = show_diff ? diff_cells(data) : data;
  return (
    <tr>
      {cell_data.map((content, index) => (
        <td key={index}>{content}</td>
      ))}
    </tr>
  );
};

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { show_diff: false };
  }

  componentDidMount() {
    console.log("show differences");
  }

  onShowDiff() {
    this.setState({ show_diff: true });
  }

  onHideDiff() {
    this.setState({ show_diff: false });
  }

  render() {
    return (
      <div className="Page">
        <button id="show-diff" onClick={this.onShowDiff.bind(this)}>
          Show diff
        </button>
        <button id="hide-diff" onClick={this.onHideDiff.bind(this)}>
          Hide diff
        </button>

        <div className="table-spec">
          <table>
            <thead>
              <tr>
                <th>spec1</th>
                <th>spec2</th>
                <th>spec3</th>
                <th>spec4</th>
              </tr>
            </thead>
            <tbody>
              <DiffRow
                show_diff={this.state.show_diff}
                data={[
                  "480GB Adata SU630 SATA SSD",
                  "512GB Adata XPG SX8200 Pro NVMe SSD",
                  "512GB Adata XPG SX8200 Pro NVMe SSD",
                  "2TB NVMe SSD"
                ]}
              />
              <DiffRow
                show_diff={this.state.show_diff}
                data={[
                  "GeForce RTX 3080 10GB",
                  "GeForce GTX 1660 SUPER 6GB",
                  "Radeon RX 5500 XT 8GB",
                  "GeForce RTX 3090 24GB"
                ]}
              />
              <DiffRow
                show_diff={this.state.show_diff}
                data={[
                  "Intel Core i5 9400F 2.9GHz",
                  "AMD Athlon 3000G 3.5GHz",
                  "AMD Ryzen 7 3700X 3.6GHz",
                  "Intel Core i9 10900K 3.7GHz"
                ]}
              />
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {};
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({}, dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home));

I think you shouldn't use diff js library in this scenario.

I saw compare site example you mentioned. its easier to compare items with specific pattern

and not character by character.

in gsmaena there is several specifications in a column which seperated with comma.

if you have several specification too, you can do like this:

const getWords = (item, array, show_diff) => {
  const seperatedWords = useRef(item.split(","));
  return seperatedWords.current.map((word, i) => (
    <span
      style={
        show_diff && !array[0].split(",").includes(word) ? { opacity: 0.3 } : {}
      }
    >
      {word}
      {i !== seperatedWords.current.length - 1 && ","}
    </span>
  ));
};

const Row = ({ data, show_diff }) => {
  return (
    <tr>
      {data.map((content, index) => (
        <td key={index}>{getWords(content, data, show_diff)}</td>
      ))}
    </tr>
  );
};

if not its easier too. you can write:

const Row = ({ data, show_diff }) => {
  const hasDifference = useRef(!data.every((val, i, arr) => val === arr[0]));
  return (
    <tr>
      {data.map((content, index) => (
        <td
          style={show_diff && hasDifference.current ? { opacity: .3 } : {}}
          key={index}
        >
          {content}
        </td>
      ))}
    </tr>
  );
};

you can see full code in this sandbox