const res = [...a, ...b, ...c] // склеили
const logicalFunction = (acc, item)=>{
if(acc[item.id]){
// попытка мержа , merge напиши сам
acc[item.id] = merge(acc[item.id], item);
} else {
acc[item.id] = item;
}
return acc;
}
const obj = res.reduce(logicalFunction, {});
const final = Object.values(obj).sort((a,b)=b.id-a.id)
function Switch({ options, value, onChange }) {
const highlight = useRef();
useEffect(() => {
const activeButton = highlight.current.closest('.c-switch').querySelector('.is-active');
highlight.current.style.width = `${activeButton?.offsetWidth ?? 0}px`;
highlight.current.style.transform = `translateX(${activeButton?.offsetLeft ?? 0}px)`;
}, [ value ]);
return (
<div className="c-switch">
<div className="c-switch__highlight" ref={highlight}></div>
{options.map(n => (
<button
key={n.value}
className={n.value === value ? 'is-active' : ''}
onClick={() => onChange(n.value)}
>{n.text}</button>
))}
</div>
);
}
React гарантирует, что идентичность функции setState
стабильна и не изменяется при повторных рендерах.
const ms = 183000;
const s = ms / 1000;
const minutes = Math.floor(s / 60); // Оставляем только целую часть
const seconds = s % 60;
console.log(minutes + ':' + seconds); // "3:3"