How to know if constant has a value?

Question

I have the code:

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import { Tile, List, ListItem } from 'react-native-elements';

class UserDetail extends Component {
constructor(props){
  super(props);
  this.state = {
    title: '',
    phone: '',
  }
}

render() {
const { id, title, whatsapp, email, phone, login, location } = this.props.navigation.state.params;
//RECEBO A CONSTANTE ACIMA DA TELA ANTERIOR. ALGUNS ITENS VEM COM INFORMAÇÃO, OUTROS NÃO

if (title){
  this.setState({title: {title}});
}

if (phone){
  this.setState({phone: {phone}});
  //QUERO SABER SE A CONSTANTE ACIMA TEM INFORMAÇÃO, E ASSIM, USÁ-LA NO ESTADO CORRESPONDENTE, POIS QUANDO ESTÁ VAZIA DÁ ERRO
}

return (
  <ScrollView>
    <Tile
      imageSrc={{ uri: `https://buscafree.com.br/assets/img/items/${id}.jpg`}}
      featured
      title={title}
      //caption={email}
    />

    <List>
      <ListItem
        title="Endereço"
        rightTitle={this.state.title}
        hideChevron
      />
      <ListItem
        title="Endereço"
        rightTitle={this.state.phone} //USAREI AQUI
        hideChevron
      />
    </List>
  </ScrollView>
);
}
}

export default UserDetail;

My code gets some information from the previous screen. However, not all items have a value (in my case, the PHONE item sometimes comes with information and sometimes not...)

When I try to print it on the screen, it gives error if it is empty/ null.

How do I check if it has information before printing on the screen?

Answer 1

Just check how Voce is doing. But Voce should not use setState() in the way render() -- this same should only have the role of model for sight, nothing more.

Then Voce must show a pro user interface in case the variable has no value. For example, if phone is not set, Voce shows a message saying something like "there is no phone value set".

Then after the value of the variable is set (I hope!) somehow, (e.g. click a button that makes an http request that at the end arrow the state of the component) the render method will skip the "if" and go directly to the desired view.

render() {
  if (!phone) {
    return <Text>Ainda nao ha informacoes do telefone. Carregando ...</Text>;
  }

  // se phone estiver definido, mostramos a visao desejada
  return (
    {/* Visao desejada */}
  );
}

It is worth pointing out that Voce does not need to ometer any screen only because of an undefined variable. In this case, Voce divides the interface into several components of presentation. Each of these components checks the values of the variable they need to present the information. If the value has not yet been set, each component shows its own "spinner" as the load message.