Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda