reactreact

Выбираем все id из второго списка.
Проходим по первому списку, и если айди уже засветился, делаем active = true



https://jsfiddle.net/fdfsgkz2/

А если первый массив можно изменять, то даже так: https://jsfiddle.net/fdfsgkz2/1/

Можно использовать indexBy из lodash/underscore для первого массива, этот хелпер преобразует массив в объект используя в качестве ключей определенное поле из вложеных в массив объектов
Так как объекты в js передаются по ссылке, то объекты в индексе и в массиве будут связаны
После пробегаем второй массив циклом и меняем значения в первом
Примерно так:

this.items = [
      {name : 'Petya', id: 1, active: false},
      {name : 'Vasjya', id: 2, active: false},
      {name : 'Dima', id: 3, active: false},
      {name : 'Lena', id: 4, active: false},
      {name : 'Katya', id: 5, active: false}
    ];
    this.itemsIndex = _.indexBy(this.items, 'id');

    this.items2 = [
      {name : 'Dima', id: 3},
      {name : 'Lena', id: 5},
    ];
    this.items2.forEach(el => {
        if(el.id in this.itemsIndex) {
            this.itemsIndex[el.id].active = true;
        }
    });

рекомендую добавить путь к иконке на уровне источника данных, ну или в контроллере. Это дело тогда можно легко покрыть тестами, без необходимости инстанцировать UI элемент.

есть свойство object-fit, но у него плохая поддержка браузерами на данный момент.
Я в таких случаях использую фоновое изображение.
Если размеры дива известны - то тут все просто, просто задаем фон

<div style="background-image:url(image.jpg)"></div>

а в css заданы остальные параметры фона, в том числе background-size
Если размеры дива по одному из измерений зависят от изображения, то можно оставить картинку внутри, сделав ее полностью прозрачной (div img {opacity: 0}), а с фоном провернуть ту же штуку, что в предыдущем примере.

ionicframework.com/docs/v2/components/#slides

Вот есть прикольная карусель slick интегрированная в ангулар https://github.com/devmark/angular-slick-carousel

owlgraphic.com/owlcarousel

В документации есть инструкция по установке.
ionicframework.com/docs/v2/getting-started/installation

Посмотрите это https://github.com/exponentjs/react-native-inverti...

https://rnplay.org/apps/xAK8xA

Например для этого можно использовать https://www.npmjs.com/package/react-addons-linked-...
Просто передать как значение пустую строку, и react это обработает

Можно так https://rnplay.org/apps/214S0w

В React есть расширения (addons), среди которых можно найти метод React.addons.update. Его использование может показаться слегка необычным:

var newState = React.addons.update(this.state, { 
    dob: { 
        year: { 
            $set: '1980' 
        }
    }
});
this.setState(newState);

Не знаю насколько сейчас это актуально, но тем не менее, это решение предлагает сам Facebook.

Например

this.setState({
    dob: {
         ...this.state.dob,
         year: '1980'
    }
})

Хотя и это можно оптимизировать например используя ramdajs.com/0.18.0/docs/#lens

Пример

<div class="bg-outer b1">
	<div class="bg-top"></div>
	<div class="bg-inner">Test</div>
</div>

html {
	min-height: 100%;
	background-color: #fff;
}
.bg-outer {
	overflow: hidden;
	position: relative;
	display: inline-block;
	margin: 50px;
	vertical-align: top;
	font-size: 2em;
	color: #fff;
}
.b1 {
	width: 400px;
}
.b2 {
	width: 250px;
}
.b1 .bg-top {
	box-shadow: 0 0 0 1000px #669;
}
.b2 .bg-top {
	box-shadow: 0 0 0 1000px #c33;
}
.bg-inner {
	position: relative;
	padding: 30px 30px 50px;
}
.bg-top {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 500%;
	border-radius: 50%;
	transform: translate(-50%, -1%);
}
.bg-top:before {
	content: "";
	display: block;
	padding: 100% 0 0;
}