react-json-view-compare
react-json-view-compare copied to clipboard
If any fields value is 'array' then rendering is not working
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.

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