react-json-view-compare icon indicating copy to clipboard operation
react-json-view-compare copied to clipboard

If any fields value is 'array' then rendering is not working

Open naimish-acko opened this issue 2 years ago • 1 comments

import "./styles.css";
import ReactJsonViewCompare from "react-json-view-compare";

const oldData = {
  name: "array",
  age: 18,
  task: [
    { name: "eat", time: "09:00" },
    { name: "work", time: "10:00" },
    { name: "sleep", time: "22:00", a: [{ a: 1 }, 2] }
  ]
};
const newData = {
  name: "coolapt",
  age: 20,
  task: [
    { name: "eat", time: "09:00" },
    { name: "work", time: "10:00" },
    { name: "sleep", time: "23:00", a: [{ a: 2 }, 2] },
    { name: "running", time: "08:00", a: {} }
  ]
};
export default function App() {
  return (
    <div className="App">
      <ReactJsonViewCompare oldData={oldData} newData={newData} />
    </div>
  );
}

With this data as the oldData.name is array this is not rendering and the system is breaking.

Below is a SS of the Playground, where the issue is coming.

image

naimish-acko avatar May 26 '22 06:05 naimish-acko

I think the problem is with this utils function

const isArray = (item) => {
  if (item === 'array') {
    return true;
  }
  return Object.prototype.toString.call(item) === '[object Array]';
};

The check over here item === 'array' is failing. It should be Array.isArray(item).

@5SSS

AgnibhaB avatar May 26 '22 10:05 AgnibhaB