Правильный способ вставить оператор if / else внутри const в React Native?

Question

Я получаю ошибку synax, и я не уверен, как это сделать каким-либо другим способом:

    const new_datas = [
      if(this.state.username != '') {
      {
        name: "Plaza",
        route: "TabNav",
        icon: require("../img/plaza_party.png"),
        bg: "#C5F442"
      },
      {
        name: `${this.state.thefirstname}'s Profile`,
        route: "ProfileScreen",
        icon: require("../img/pass.png"),
        bg: "#C5F442"
      },
    }
    else{
      {
        name: "Plaza",
        route: "TabNav",
        icon: require("../img/plaza_party.png"),
        bg: "#C5F442"
      },
      {
        name: "Login/Sign Up",
        route: "LoginScreen",
        icon: require("../img/pass.png"),
        bg: "#477EEA",
      },
    }
  ];

В основном, что должно произойти, когда имя пользователя будет сохранено в состоянии, тогда оно должно обновить содержимоепереключиться с Login/Signup на this.state.firstname Profile.Есть ли правильный способ добиться этого?

Редактировать: Дополнительный код:

<List
        dataArray={new_datas}
        renderRow={data =>
          <ListItem
            button
            noBorder
            onPress={() => this.props.navigation.navigate(data.route)}
          >
            <Left>
              <Image
                active
                source={data.icon}
                style={{ height: 50, width: 50 }}
              />
              <Text style={styles.text}>
                {data.name}
              </Text>
            </Left>

            {data.types &&
              <Right style={{ flex: 1 }}>
                <Badge
                  style={{
                    borderRadius: 3,
                    height: 25,
                    width: 72,
                    backgroundColor: data.bg
                  }}
                >
                  <Text
                    style={styles.badgeText}
                  >{`${data.types} Types`}</Text>
                </Badge>
              </Right>}
          </ListItem>}
      />

Эта часть не изменится, когда я войду в систему.

Answer 1

Я думаю, что троичный оператор - это то, что вам нужно:

const new_datas = props.username ? [
  {
    name: "Plaza",
    route: "TabNav",
    icon: require("../img/plaza_party.png"),
    bg: "#C5F442"
  },
  {
    name: `${this.state.thefirstname}'s Profile`,
    route: "ProfileScreen",
    icon: require("../img/pass.png"),
    bg: "#C5F442"
  } 
]:[
  {
    name: "Plaza",
    route: "TabNav",
    icon: require("../img/plaza_party.png"),
    bg: "#C5F442"
  },
  {
    name: "Login/Sign Up",
    route: "LoginScreen",
    icon: require("../img/pass.png"),
    bg: "#477EEA",
  },
];

Answer 2

используйте let, если нет имени пользователя, присвойте какое-нибудь значение

let new_datas = [];

  if(this.state.username != '') {

    new_datas = [{
      name: "Plaza",
      route: "TabNav",
      icon: require("../img/plaza_party.png"),
      bg: "#C5F442"
    },
    {
      name: `${this.state.thefirstname}'s Profile`,
      route: "ProfileScreen",
      icon: require("../img/pass.png"),
     bg: "#C5F442"
    },]
  }else{

    new_datas = [{
      name: "Plaza",
      route: "TabNav",
      icon: require("../img/plaza_party.png"),
      bg: "#C5F442"
    },
    {
      name: "Login/Sign Up",
      route: "LoginScreen",
      icon: require("../img/pass.png"),
      bg: "#477EEA",
    },]
  }

Answer 3

Я не уверен, почему у вас есть две декларации объектов внутри скобок if и else.Вам не хватает скобок массива и имен переменных?

Если бы мне пришлось это сделать, мне сначала нужно найти инициирующее событие для имени пользователя, например поле ввода onChange, а затем позволить этому событию вызвать функцию.Внутри сработавшей функции я добавлю имя пользователя setState.Затем внутри функции рендеринга я добавлю условие, которое оценивает this.state.username.