Как выбрать кнопку в массиве элементов и отменить выбор предыдущего значения

Question

Я работаю над извлечением массива данных из магазина.Только один элемент в этом массиве элементов может иметь значение «default» == true.Остальные предметы будут ложными.Я хочу дать пользователю возможность выбрать одну из кнопок, а затем удалить значение по умолчанию из кнопки, которая имела значение true.Я знаю, что могу сделать функцию для изменения значения в firestore с помощью функции слушателя.Я предпочел бы обрабатывать это локально, поэтому я сохраняю себя для чтения / записи в firestore

Мне нужно отобразить массив и изменить состояние?любая помощь очень ценится.

Моя функция renderItem:

 if (item.type == 'car'){
                        return (
                          <TouchableHighlight onPress={() => this.selectItem(item)} underlayColor={'transparent'}>
                            <LinearGradient key={key} style={{justifyContent: 'center', borderRadius: 30, width: 180, height: 120, alignSelf: 'center'}} colors={['#ff00ff', '#0066ff']}>

                                        <Text style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                        {checkMark}
                                        </Text>
                      <View style={{alignSelf: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 60/2, backgroundColor: 'white'}}>
                                    <Text style={{alignSelf:'center'}}>
                                    {car} 
                                    </Text>
                                </View>
                                <Text style={{marginTop: 5, fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                  {item.make} {item.model} {item.year}
                                </Text>
                                <Text style={{fontWeight: 'bold', color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                 {item.licensePlate} 
                                </Text>
                            </LinearGradient>
                          </TouchableHighlight>
                          )
                      }
                      if (item.type == 'bicycle') {
                        return (
                            <LinearGradient key={key} style={{justifyContent: 'center', borderRadius: 30, width: 180, height: 120, alignSelf: 'center'}} colors={['#99cc00', '#000099']}>
                                  <View style={{alignSelf: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 60/2, backgroundColor: 'white'}}>
                                        <Text style={{alignSelf: 'center'}}>
                                        {bicycle} 
                                        </Text>
                                    </View>
                                    <Text style={{marginTop: 5, fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                      {item.make} {item.model} {item.year}
                                    </Text>
                                    <Text style={{fontWeight: 'bold', color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                     {item.licensePlate} 
                                    </Text>
                            </LinearGradient>

                          )
                        }

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

Answer 1

Я смог заставить его работать, выполнив следующее.

  var currentDefault = this.state.vehicleList.find(function(element, index) {
  return element.default == true;
  });
  var currentVehicle = this.state.vehicleList.indexOf(currentDefault);
  var selectedItem = this.state.vehicleList.indexOf(val);

   if (currentVehicle == selectedItem){
    console.log('same vehicle');
   } else {
    this.state.vehicleList[currentVehicle].default = false;
    this.state.vehicleList[selectedItem].default = true;
   }

Answer 2

Просто отфильтруйте ваш массив.

var someArrayFromFirebase = [{"default": false}, {"default": true},{"default": false},{"default": false}];

var removeDefaultTrue = function() {
  someArrayFromFirebase = someArrayFromFirebase.filter(v => !v.default);
  render();
}

var render = function() {
  document.getElementById("content").innerHTML = JSON.stringify(someArrayFromFirebase);
}

render();

<button onclick="removeDefaultTrue()" >Remove or whatever</button>

<div id="content"></div>

Функция рендеринга предназначена только для визуализации.Другая функция выполняет фильтрацию.Надеюсь, это поможет.