unexpected token when trying to declare a variable

Question

i'm trying to declare an variable inside the FlatList component in React Native But i get unexpected token, when i do declare it.

const FixturesScreen = ({ navigation }) => (
  <ScrollView style={styles.container}>
    <FlatList
      data={clubData.data.clubs}
      renderItem={({ item }) => (
        let fixture = item.name //unexpected token

        <View>
          <View>
            <Text style={styles.itemTitle}>{item.name}</Text>
            <ScrollView horizontal>
              <Text style={styles.listItem}>{fixture}</Text>
            </ScrollView>
          </View>
        </View>
  )
}
    />
  </ScrollView>
)

here is my full FixturesScreen cdoe

import React from 'react'
import { View, Text, FlatList, ScrollView, StyleSheet } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import clubData from '../../clubData'


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#4BABF4',
  },
  itemTitle: {
    color: 'black',
    fontSize: 20,
    marginTop: 20,
    marginBottom: 10,
    marginLeft: 15,
  },
  listItem: {
    color: '#FFFFFF',
    fontSize: 18,
    textAlign: 'center',
    marginRight: 15,
    marginLeft: 15,
    backgroundColor: '#77BEF5',
    width: 120,
    paddingVertical: 10,
  },
})


const CURRENTTGAMEWEEK = 30
const i = CURRENTTGAMEWEEK
const nxt1 = i + 1
const nxt2 = nxt1 + 2
const nxt3 = nxt2 + 1
const nxt4 = nxt3 + 1
const nxt5 = nxt4 + 1


// let fixture
// const team = clubData.data.clubs[0].name
// const hTeam = clubData.data.clubs[0].fixtures[0].homeTeam
// const hTeamShort = clubData.data.clubs[0].fixtures[0].homeTeamShort
// const aTeamShort = clubData.data.clubs[0].fixtures[0].awayTeamShort
// 
// if (team === hTeam) // working
//   fixture = aTeamShort
// else
//   fixture = hTeamShort

console.log(`Now is playing ${fixture}`)

const FixturesScreen = ({ navigation }) => (
  <ScrollView style={styles.container}>
    <FlatList
      data={clubData.data.clubs}
      renderItem={({ item }) => (
        let fixture = item.name

        <View>
          <View>
            <Text style={styles.itemTitle}>{item.name}</Text>
            <ScrollView horizontal>
              <Text style={styles.listItem}>{fixture}</Text>
            </ScrollView>
          </View>
        </View>
  )
}
    />
  </ScrollView>
)

FixturesScreen.navigationOptions = {
  tabBarTestIDProps: {
    testID: 'TEST_ID_HOME',
    accessibilityLabel: 'TEST_ID_HOME_ACLBL',
  },

  tabBarLabel: 'Main',
  tabBarIcon: ({ tintColor, focused }) => (
    <Ionicons
      name={focused ? 'ios-home' : 'ios-home-outline'}
      size={26}
      style={{ color: tintColor }}
    />
  ),
}

export default FixturesScreen

So basically what i'm trying to do is declare homeTeam, awayTeam and Fixture inside the flatlist, so i can do an if/else conditional rendering inside the flatlist. I can achieve that outside the flatlist component but it is not right, because i can not compare all objects at once.

Answer 1

While using arrow functions () => ('someValue') is a shortcut for () => { return 'someValue'}.

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// A function with no parameters should be written with a pair of parentheses.
() => { statements }

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

So if you want to run some code before returning a value you should do like below;

const FixturesScreen = ({ navigation }) => (
  <ScrollView style={styles.container}>
    <FlatList
      data={clubData.data.clubs}
      renderItem={({ item }) => { //change to curly braces
        let fixture = item.name;
        // do something here

        return (
          <View>
            <View>
              <Text style={styles.itemTitle}>{item.name}</Text>
              <ScrollView horizontal>
                <Text style={styles.listItem}>{fixture}</Text>
              </ScrollView>
            </View>
          </View>
        );
      }}
    />
  </ScrollView>
)