JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stateList"></div>
<div id="stateValueList"></div>

JavaScript

var data = [
        {"value": 10.2, "cat": "A", "state": "MA"},
        {"value": 5.3, "cat": "B", "state": "MA"},
        {"value": 20.1, "cat": "A", "state": "NY"},
        {"value": 17.3, "cat": "B", "state": "NY"},
        {"value": 7.7, "cat": "A", "state": "CT"},
        {"value": 11.3, "cat": "B", "state": "CT"}
       ];

var reference = [
             {"state": "MA", "increment": 4.1},
             {"state": "NY", "increment": 0.3},
             {"state": "CT", "increment": 20.6}
            ];

// Produce an array of state strings
var states = reference.map(function(el) { return el.state; });

// Produce an object with state strings as keys and increments as the values
var stateIncMap = reference.reduce(function(items, item) {
    items[item.state] = item.increment;
    return items;
}, {});

// Update elements' values using the increments
data.forEach(function(el) {
    el.value += stateIncMap[el.state];
});


document.getElementById("stateList").textContent = states.toString();

document.getElementById("stateValueList").textContent = data.map(function(el) { return el.value.toFixed(1); }).toString();