JSFiddle - React, Tailwind, and code Playground
HTML
<button onclick="addOrReplaceClick()">Click me</button>
<pre id="out"></pre>
CSS
#out {
background-color: #fff;
border: 1px solid #333;
box-sizing: border-box;
padding: 10px;
}
JavaScript
/**
* This is a 'specific filter search', it can be extrapolated to search for
* specific keys and values with slight modification.
*/
function addOrReplace( argh, obj ) {
var index = -1;
argh.filter((el, pos) => {
if( el.uid == obj.uid )
delete argh[index = pos];
return true;
});
argh[index] = obj;
}
function updateOutput( text ) {
document.querySelector("#out").innerHTML = JSON.stringify(text, null, 4);
}
// Test data
var arr = [
{uid: 1, name: "bla", description: "cucu"},
{uid: 2, name: "smth else", description: "cucarecu"},
];
// show right away
updateOutput(arr);
// add the updates when clicked
function addOrReplaceClick() {
var newData = {uid: 1, name: 'changed name', description: "changed description"};
addOrReplace(arr, newData);
updateOutput(arr);
}