JSFiddle - React, Tailwind, and code Playground

JavaScript

var arr1 = [
        {id: 1, text:"hello", oid:2},
        {id: 2, text:"juhu", oid:3},
        {id: 3, text:"wohoo", oid:4},
        {id: 4, text:"yeehaw", oid:1}
    ];
    var arr2 = [
        {id: 1, name:"yoda"},
        {id: 2, name:"herbert"},
        {id: 3, name:"john"},
        {id: 4, name:"walter"},
        {id: 5, name:"clint"}
    ];
         
    function merge(arr1, arr2, prop1, prop2) {
        return arr1.map(function(item){
            var p = item[prop1];
            el = arr2.filter(function(item) {
                return item[prop2] === p;
            });
            if (el.length === 0) {
                return null;
            }
            var res = {};
            for (var i in item) {
                if (i !== prop1) {
                    res[i] = item[i];
                }
            }
            for (var i in el[0]) {
                if (i !== prop2) {
                    res[i] = el[0][i];
                }
            }
            return res;
        }).filter(function(el){return el !== null;});
    }
         
    var res = merge(arr1, arr2, "oid", "id");
    console.log(res);