Невозможно показать / скрыть компонент в функции карты

Question

У меня есть массив элементов, которые содержат текст, пары значений.Мне нужно отображать текст, только если он не равен нулю, а значение никогда не равно нулю, и я отображаю его нормально.

var items= [ 
  {id: 1, title: "title1", property: {text: null, value: 222}}, 
  {id: 2, title: "title2", property : {text: "star", value: 123}}, 
  {id: 3, title: "title3", property:{text: "sun", value: 456}}, 
  {id: 4, title: "title4", property: {text: null, value: 789}}
];

Для этого я сделал следующее:

class DisplayItems extends Component {
  render() {
    return ({
      items.map(item => {
        return (
          showIf(!isEmpty(item.property.text))(
            <Text>
              text: {item.property.text}
            <Text />
          ),(
            <Text>
            value: {item.property.value}
            <Text />
          )
        )
      })
    })
  }
}

Нодаже если item.property.text имеет значение null, он входит в условие showIf, а также текст не обрабатывается, если в нем есть какая-то строка.showIf - это внутренняя функция, которая скрывает компоненты, если условие ложно.Пожалуйста, помогите с этой проблемой, так как я хочу отобразить одно свойство (текст), но отображать другое свойство (значение) независимо от условия.

Answer 1

Может быть, это решит это для вас:

class DisplayItems extends Component {

render() {
    return (
            { 
              items.map(item => {
                    return (
                          <Text>
                              { item.property.text && `text: ${item.property.text}` }
                              value: {item.property.value}
                          <Text/>
                      )
                });
            }
        )
    }
}

Answer 2

Я думаю, что проблема во втором операторе возврата.Если вы посмотрите внимательно, это не является действительным JSX.Вы должны изменить это на это:

class DisplayItems extends Component {

render() {
    return (

            { 
              items.map(item => {
                   return (
                            <Text>
                                 { showIf(!isEmpty(item.property.text))? "text: " + item.property.text : "text: " + item.property.value}
                            <Text/>
                         )
              })
            }
    )
}

}