Passing the index of an array as a prop to my nested page in React Native-CodePudding

I am very new to Javascript and React Native and am looking for the best solution, thanks in advance :)

Quick rundown on what I am programming: This specific feature is meant to access our database and list all the parents and create new objects (Program) and attach all the attributes from the database to this new instance of "Program". Then to ensure we list all the programs everytime even if more are added we simply create a global.array with all these "Programs" and list them on our screen. This global feature is for me to access the array from a child page later once I have the index.

const programsRef = ref(getDatabase(), 'programs');

class Program {
  constructor(name, description, inperson, online){
    this.name = name;
    this.description = description;
    this.inperson = inperson;
    this.online = online;
  }
}

global.programList = []; //Converted to a global array to access items in array from other pages
get(programsRef).then(snapshot => {
  snapshot.forEach(item => {
    const temp = new Program(item.val().name, item.val().description, item.val().inperson, item.val().online);
    programList.push(temp);
  })
});

Then with React Native code we display it with the .map()

     <View style={styles.middleContainer}>
        <View>
          <Text style={styles.heading}> Programs </Text>
          
          {programList.map((item) =>
            <View key={item.name}>
            <Pressable onPress={() => navigation.navigate('COURSE', {
              ID: item.name,
              desc: item.description,
              Index: {programList.findIndex(Program => {return Program.name === item.name;})},
            })}>
              <Text style={styles.bodyText}>{ item.name }</Text>
            </Pressable>
          </View>
        )}
        </View>
      </View>

As you can see within the Pressable I have included passing props to the child page. the problem is I want to pass the index of the Program instance to the child but adding JavaScript in there just like that is making the compiler unhappy:

index.js:1 ./Screens/Programs.js:79:33
Syntax error: Unexpected token, expected ","

  77 |               ID: item.name,
  78 |               desc: item.description,
> 79 |               Index: {programList.findIndex(Program => {return Program.name === item.name;})},
     |                                  ^
  80 |             })}>
  81 |               <Text style={styles.bodyText}>{ item.name }</Text>
  82 |             </Pressable>

I don't know how to convince the compiler to take the code and not expect a single argument. Any ideas?

CodePudding user response：

     <View style={styles.middleContainer}>
    <View>
      <Text style={styles.heading}> Programs </Text>
      
      {programList.map((item, index) => // added changes here
        <View key={item.name}>
        <Pressable onPress={() => navigation.navigate('COURSE', {
          ID: item.name,
          desc: item.description,
          Index: index, // added changes here
        })}>
          <Text style={styles.bodyText}>{ item.name }</Text>
        </Pressable>
      </View>
    )}
    </View>
  </View>