title: Correct way to insert an if/else statement inside const in React Native?
body: <p>I keep getting a synax error and I'm not sure how to do this any other way:</p>
  
  <pre><code>    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",
        },
      }
    ];
  </code></pre>
  
  <p>Basically what should happen is once the username is stored in state it should update the contents then switch from <code>Login/Signup</code> to <code>this.state.firstname Profile</code>. Is there any correct way to achieve this ?</p>
  
  <p>Edit: Extra code:</p>
  
  <pre><code>&lt;List
          dataArray={new_datas}
          renderRow={data =&gt;
            &lt;ListItem
              button
              noBorder
              onPress={() =&gt; this.props.navigation.navigate(data.route)}
            &gt;
              &lt;Left&gt;
                &lt;Image
                  active
                  source={data.icon}
                  style={{ height: 50, width: 50 }}
                /&gt;
                &lt;Text style={styles.text}&gt;
                  {data.name}
                &lt;/Text&gt;
              &lt;/Left&gt;
  
              {data.types &amp;&amp;
                &lt;Right style={{ flex: 1 }}&gt;
                  &lt;Badge
                    style={{
                      borderRadius: 3,
                      height: 25,
                      width: 72,
                      backgroundColor: data.bg
                    }}
                  &gt;
                    &lt;Text
                      style={styles.badgeText}
                    &gt;{`${data.types} Types`}&lt;/Text&gt;
                  &lt;/Badge&gt;
                &lt;/Right&gt;}
            &lt;/ListItem&gt;}
        /&gt;
  </code></pre>
  
  <p>This part will not change once I have logged in.</p>