Условный стиль React Native на основе поля сопоставленного массива

Question

Я пытаюсь создать список с измененным стилем на основе выбора:

У меня есть динамическое состояние c -

constructor(props) {
    super(props);
    this.state = {
      inventoryArray: InvData.map(obj => ({...obj, clicked: false})),
    }
  }

Я хочу использовать состояние щелчка каждый объект для определения стиля - но я не совсем уверен в том, какой синтаксис использовать - я пробовал:

 returnInventoryObjects = () => {

    return (

      this.state.inventoryArray.map((data, i) => {
        return (
          if({data.clicked}) ? {
            <View key={i} style={[InventoryStyles.InventoryItem,  InventoryStyles.InventoryItemSel ]}>
          }
          else{
            <View key={i} style={[InventoryStyles.InventoryItem]}>
          }

, что не работает -

Я также пробовал встроенный Dynami c style ie -

returnInventoryObjects = () => {

    return (

      this.state.inventoryArray.map((data, i) => {
        return (
      
          <View key={i} style={[InventoryStyles.InventoryItem,  {data.clicked} &&  InventoryStyles.InventoryItemSel ]}>
            

Кто-нибудь, пожалуйста, посоветуйте, как этого добиться?

Вот ошибка, показанная при реализации варианта 2 -

введите описание изображения здесь

Используемые стили:

InventoryItem:{
    backgroundColor:'rgba(255,255,255,0.8)',
    paddingVertical:8,
    paddingHorizontal:8,
    flexDirection:'row',
    marginBottom:15,
  },
  InventoryItemSel:{
    backgroundColor:'rgba(255,255,255,0.2)',
  },

Answer 1

Я думаю, вы пытались создать такой условный стиль:

<View
  key={i}
  style={
    data.clicked
      ? [InventoryStyles.InventoryItem]
      : [InventoryStyles.InventoryItem, InventoryStyles.InventoryItemSel]
  }
/>

Я бы сделал:

// More maintanable
const DEFAULT = [InventoryStyles.InventoryItem];

<View
  style={
    data.clicked ? DEFAULT : [...DEFAULT, InventoryStyles.InventoryItemSel]
  }
/>

Обратите внимание, что оператор {data.clicked} анализируется как выражение в рамках , а не как объект или что-то еще, что вы имели в виду.

Таким образом, использование его в массиве или в выражении if является синтаксической ошибкой.

{ // Scope
  data.clicked // Expression
}

Answer 2

Попробуйте это:

this.state.inventoryArray.map((data, i) => {
      if(data.clicked) {
          return (
            <View key={i} style={[InventoryStyles.InventoryItem,  InventoryStyles.InventoryItemSel ]} />
          )
      }
      else {
          return (
              <View key={i} style={[InventoryStyles.InventoryItem]} />
          )
      }
}

Answer 3

Компоненты React, у которых нет дочерних элементов, должны быть самозакрывающимися (/ в конце). Обратите внимание на разницу между

<View key={i} style={[InventoryStyles.InventoryItem,  InventoryStyles.InventoryItemSel ]}>

и

<View key={i} style={[InventoryStyles.InventoryItem,  InventoryStyles.InventoryItemSel ]} />

Обязательно исправьте это во всех View компонентах. Остальное выглядит нормально!