Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

150
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda