KnightForce

Какая-то переменная / поле / аргумент имеет значение undefined - вместо ожидаемого.
Вы берете у него еще что-то и получаете ошибку.
Например:
chats[context.chatId].users[context.senderId]

Если chats[context.chatId] undefined, то у него нет никакого users.

У вас в методе open создается переменная int testText = 2;.
Чтобы сменить значения в родителе - просто напишите testText = 2;.
Если хотите изменить значения при наличии локальной testText в методе:

class Child extends Parent{
   open(){
    @Output()
     int testText = 2;
     this.testText  = 2;
     // Присвоит значение в переменную у класса, а не в созданную выше.
     // В данном случае у родителя из-за наследования.
   }
}

1)
Где-то в коде:
var obj = tdList[1];

В другом месте:
tdList[tdList.indexOf(obj)]

2) По нормальному:
tdList.find((item) => item.task == 'a');

3) Вариант, который соответствует вашему коду:
indexOf у массивов уже есть, так что назвал по-другому

Array.prototype.indexOfObjectValue = function(value) {
    for(var i = 0; i < this.length; i++) {
        if(typeof this[i] != 'object') continue;
        for(var key in this[i]) {
            if(this[i][key] == value) return this[i];
        }
    }
}

tdList.indexOfObjectValue('a').task

Как-то расплывчато.

Что бы делал я.
Задача максимально сохранить код в том виде в каком он написан под Web.
1) Если нужно будет переносить UI, то эту часть придется переписывать.
2) Геолокация. Представим что обращение к ней сильно различается по синтаксису и данные возвращаются в ином виде.
Тогда подключаем библиотеку в отдельный файл и пишем класс обёртку, которая сделает нужные запросы и вернёт ответ в нужном виде для кода с веб.

Гипотетический пример.
На Web синтаксис:

GEO.getLocation(function(result){

});

А на React Native:

let geo = await System.getGeo();
let location = await geo.getLocation();

Как можно адаптировать:

class Geo {
    static async getLocation(callback) {
        try {
            let geo = await System.getGeo();
            callback(await geo.getLocation());
        } catch(e) {}
       
        geo = null;

    }

}

Этим примером я хотел показать, что разность реализации можно скрыть классом обёрткой.

А событие scroll ловить не пробовал, без всяких либ?

1) Поле с +7 можно сделать блоком, либо input с value=''+7" и в обработчике ввода написать return false или e.preventDefault.
2) Перемещение при вводе номера нужно отлавливать по длинне заполненных символов, поставить на поле числовой тип и/или на oninput (но я делал на key события, так как в IE не срабатывает при удалении символом, минус в том, что поведение не идеальное и если ввести не то, то оно появится и сразу удаляется, по этому можно комбинировать input событие на ввод, а keydown на удаление, если IE не нужны, то только input) событие проверять является то что введено числом.
Например:

function(e) {//Обработчик события
    var value = e.target.value;
    value = parseInt(value);
    e.target.value = value;
    if(value.length>5){//Примерное число
        /*
            В этом месте можно либо использовать blur и focus, либо программно вызывать нажатие на клавишу таб.
        */
        retrurn false;
    }
}

3) При обновлении страницы и так все обнулится.
А если по кнопке то задай инпутам value=''.

![] == false
[] при сравнении становится true
Выходит что true != false
А вообще даже [1] == [1] выдаст false два разных объекта (в js массив тоже объект).

Тебе понадобится какая-нибудь либа.
Например:
https://stackoverflow.com/questions/38658716/react...

Если тебе просто нужно заменить все точки на восклицательном при вводе/изменении input, то:

onChange(e) {
    e.target.value=e.target.value.replace(/\./g, "!");//Регулярное выражение, которое заменит все точки
}

Повесить слушателя можно так:
А)
1) В теге jsx написать ref={(elem)=>{this.elem = elem}}
2) В коде или в том же ref написать:
elem.addEventListener
Но это не лучшая практика.

Б)

class NavigationBlock extends Component {

  constructor(props) {
    super(props);
    this.props=props;
    this.handlerClick=this.handlerClick.bind(this);
  }

  handlerClick(e) {
      //обработка клика
  }

  render() {
      let emenets = bigArrayData.map((item)=>{
          return <div onClick={this.handlerClick}>item</div>
      }); 
      return <div>{elements}</div>
  }
}

Если тебе нужно отследить какой инпут нажат, можешь пойти таким путем:
А) отлавливать что-то через e.target.
Б)

handlerClick(number) {
       return (e)=>{
              alert(number); //Типа обработка
       }
  }

  render() {
      let emenets = bigArrayData.map((item, i)=>{
          return <div onClick={this.handlerClick(i)}>item</div>//вместо i любое значение
      }); 
      return <div>{elements}</div>
  }

Как делаю я:

handlerClick(type) {
    return(e){
        let {onClickDiv, onClickSpan} = this.props;
        switch(type) {
             case "clickDiv":
                 onClickDiv && onClickDiv(e);
                 break;

              case "clickSpan":
                 onClickSpan && onClickSpan(e);
                 break;
        }
    }
}

render() {
    return(
        <div onClick={this.handlerClick("clickDiv")}>
            <span onClick={this.handlerClick("clickSpan")></span>
        </div>
    );
}

В итоге можешь писать так:

<MyComponen onClickDiv={что-то}  onClickSpan={что-то} /t>

Сверить позиции, если позиции равны - добавить класс.
Можешь через offset(), или style.top.

setTimeout(()=>{
    //Код - контекст привязал через стрелочную функцию
}, 5000)

Как-то так.
Установить:
npm install --save jquery .

Использовать:
import jQuert from jquery;

Абстрактно: У тебя есть 1 узел слева на вложенности 500 узлов, 2 узел на вложенности 1000 и третий на 700, все в 3 разных направления и необходим, чтобы они работали синхронно от данных. И вот тут у тебя есть единый контейнер от которого и получаешь данные. А чтобы не передавать через цепочку props - используй контекст.
Написано только что