tron21

const all = [{id:0}, {id:1}, {id:2}];
  const local = [{movieId:1}];
  
  const result = all.map((am) => {
    const lm = local.find((m) => m.movieId === am.id)
    return lm ?? am;
  });

а можешь, пожалуйста, уточнить насчет возвращаемого значения return lm ?? am;

https://developer.mozilla.org/ru/docs/Web/JavaScri...

В React операция setstate не синхронная, то есть, результат применения setCards будет виден только при перерендере компонента. Если вы хотите получить изменённый массив cards, то вам нужно либо создать временную переменную для этих данных и потом передать её в setCards:

const computedCards = // выражение, которое вы кладёте в setCatds
setCards (computedCards);
 console.log(computedCards);

Либо сделать чуть хитрее - следить за измением cards с помощью useEffect хука:

React.useEffect(() => {
  console.log(cards);
}, [cards]);

function handleStartSearch(data) {
    setCards(!data ? dataJson.result : dataJson.result.filter(item =>
            (item.title.includes(data) || item.author_lastName.includes(data)
           || item.author_firstName.includes(data)))
}

Так за это не React отвечает. Это задача для используемого сборщика, нужно в нём смотреть.
Какой сборщик используется?

Если через CRA было создано (там Webpack), то там всё настроено. Импортировано будет уже как объект, JSON.parse() делать не нужно, это вызовет ошибку SyntaxError.

И кстати да, а ошибка то какая? В ней обычно половина ответа на вопрос.

Не представляю, где вы этот код взяли, но часть элементов там вообще от балды.

Во-первых, costButton, на который вяжется обработчик клика в конце, никак не определен.
Очевидно, это кнопка сортировки, поэтому заменяем на document.querySelector('#cost-button')

Во-вторых, const elementsContainer = document.querySelector('.elements__lis');.
Похоже, list, а не lis - опечатка :)

В-третьих, costArrow - это, похоже, должна быть картинка, показывающая направление сортировки.
Её нет, значит, убираем costArrow, убираем аргумент arrow у sortCard и у нее же убираем строку toggleArrow(arrow); (можно так же и саму function toggleArrow выкинуть).

Вуаля, все работает.

const allElements = document.querySelectorAll('.elements__item');
const allPrice = '.elements__item-title_cost';

const elementsContainer = document.querySelector('.elements__list');

//функция по сортировке
function sortCard(elements, type) {
    let sortingObj = {};
    elements.forEach((element, index) => {
        const elementValue = parseInt(element.querySelector(type).textContent.replace('руб.', '').replace(/\s+/g, ''));
        sortingObj[elementValue] = {'element': element, 'index': index};
    });
        
        const keys = Object.keys(sortingObj);
    
        function numberSort(a, b) {
            a = parseInt(a);
            b = parseInt(b);
            if (a < b) return -1;
            if (a > b) return 1;
          }
        keys.sort(numberSort);

        keys.map(function(key, index){
            elementsContainer.insertAdjacentElement('beforeend', sortingObj[key]['element']);
          });
        
}



document.querySelector('#cost-button').addEventListener("click", function() {
    sortCard(allElements, allPrice);

})