How to receive data in an React Native component?

Question

Hey, there, you guys! I am studying React Activate and I came across a problem that I could not solve, I tried in every way and searched in several places :(

I have a list of employees and each employee has an id, name, position and sector. The listing and deletion operations are working, however, I am willing to do the editing operation. for this I need the employee id. I’m not able to pass this id to the other screen, that would be editing the same.

This is the code so far:

return (

        <FlatList
            data={colaboradores}
            keyExtractor={item=>item.id}
            renderItem={({ item }) => (
                <View style={styles.item}>
                    <Text style={styles.nome}>{item.nome}</Text>
                    <Text style={styles.cargo}>{item.cargo}</Text>
                    <View style={styles.touchOpacity}>
                        <TouchableOpacity style={styles.buttonEditar} id={item.id} onPress={()=>navigation.navigate('EditarColaboradores')}>
                            <Text style={styles.textButton}>Editar</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.buttonExcluir} onPress={()=>excluiColaborador(item.id)}>
                            <Text style={styles.textButton}>Excluir</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )} />

    )

This is the editing file:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
    View,
    Text
} from 'react-native';

const EditarColaborador = (props)=>{

    return(
        <View>
            <Text>
                Editar Colaborador
            </Text>
            {
                console.log(props.id)
            }
        </View>
    )

}

export default EditarColaborador

I thought writing a property called ID on the button and "receiving" it in the 'props' of the recipient file would solve the problem. but the value of props.id is "Undefined"

Answer 1

You need to pass the parameters through the route using the navigation of the react navigation, adding an object with the information:

navigation.navigate('Home', { post: postText });

To get the next page just use the route.params

 const {post} = route.params;

or

const {post} = props.route.params;

I don’t think it’s a good idea to use a console.log within your jsx, just print the Id even interpolating with keys: { id } or { props.id }