hzzzzl

цикл for должен выводить все данные с ключом 'id', но выводит он только последние значение

не, он все значения и выводит в один и тот же блок, перезатирая предыдущее содержимое

var txt = ''
for (var i = 0; i < data.length; i++) {
  console.log(data[i]['id']);//В консоль все выводтся как надо
  txt = txt + data[i]['id'] + ' ' // пробел между элементами для наглядности
}
$('#test').text(txt)  // всё сразу

filterData.map(c => {
  const [m, y] = c.validTill.split('/')
  const date = new Date(2000 + Number(y), m, 1, 23)  // придется переписать в 22м веке :(
  date.setDate(date.getDate() - 1)
  return {
    product: c.product,
    maskedNum: c.cardNum.slice(0, 4) + ' ****** ' + c.cardNum.slice(-4),
    validDate: date.toISOString()
  }
})

function click(e) {
  console.log(e.target.offsetWidth)
}

из прототипа одного компонента, обновить информацию в другом без пострендеринга

то есть прокидываешь новый проп, и компонент не перерендеривается?
посмотри shouldComponentUpdate(), там можно сравнить новые пропсы с this.props, и вернуть false если не надо рендерить заново
https://reactjs.org/docs/react-component.html#shou...

такое?

titles = ['title one', 'title two', 'title three']

searcheable.innerHTML = `<ul>
  ${ titles.map( t => `<li>${t}</li>` ).join('') }
</ul>`

/*
<ul>
 <li>title one</li><li>title two</li><li>title three</li>
</ul>
*/

var button = document.querySelectorAll('button');
button.addEventListener('click', function() { ... } )

^ так не получится, querySelectorAll вернет массив, а addEventListener можно вешать только на отдельный элемент, поэтому по всему массиву надо пройтись и повесить каждому свой обработчик события

inline-block

если хреф всегда такой, то можно хоть так

document.querySelector('a[href="#!"]')

иначе получать родителя div.card__overlay-wrapper и children[номер]

const elems = document.querySelectorAll('p');
elems.length // 2

что-то типа табов?
https://codepen.io/tag/tabs

вот есть на css, но лучше с js такое делать, конечно
https://codepen.io/sharkcoder/pen/QWbqqxB

как-то так, если я правильно понял что сделать надо вообще

obj = {
  "id": 1,
  "title": "Article 1",
  "children": [
    {
      "id": 1,
      "title": "Title Inside 1",
      "children": [
        {
          "id": 11,
          "title": "Title Inside 2",
          "children": [
            {
              "id": 121,
              "title": "Title Inside 4"
            },
            {
              "id": 12341,
              "title": "Title Inside 6"
            }
          ]
        }
      ]
    }
  ]
}

function fn(obj, upd) {
  obj = {...obj, ...upd}
  if(Array.isArray(obj.children)) { 
    obj.children = obj.children.map(child => fn(child, upd)) 
  }
  return obj
}

fn(obj, { id: 2, title: 'Article 2' })

это для одного объекта, но должно получиться за-map-ать массив таких элементов такой функцией

да, потому что надо циклом
(что если num = 234798759827349721394797521973 ?)

s = String(123456)
sum = 0
for(n in s) { 
  sum = sum + +n   // +n = Number(n)
}
// sum = 15

я только про первую часть вопроса, но подробнее

map State To Props = соотнести стейт (редюсера) с пропсами (компонента)
то есть функция получает целый стейт редюсера, возвращает объект, который добавляется к пропсам компонента

const mapStateToProps = state => ({
    onLike: state.propReducer.like
});
// this.props.onLike = reducer.state.onLike

const mapStateToProps = state => state;
// this.props.state = целый большой объект стейт редюсера

почему так лучше не делать? потому что при ЛЮБОЙ даже незначительной смене стейта компонент будет перередериваться, лучше забирать в компонент только самое необходимое

button.addEventListener('click', () => {
  if(something) {
    window.location = 'https://qna.habr.com/q/741299'
  }
})