How to take the value of a state and send to another page using React-Native?

Question

Good morning, I just created separate component which is a select Picker, its function is to take the values entered in the database and show to the user to select, here is my code.

import React, {Component}from 'react';
import { View, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import firebase from '../../services/firebaseConection';

export default class PickerCadastroAdm extends Component{
    
    constructor() {
        super();
        this.state = {
          setor:[],
          setor_selecionado: ""
        };

        firebase.database().ref('setores').once('value', (snapshot)=>{
              let state = this.state;
              state.setor =[];
    
              snapshot.forEach((childItem)=>{
                  state.setor.push({
                  key: childItem.key,
                  setor:childItem.val().nome
                });
              });
              this.setState(state);
            });
        }
        

    render(){
        return(
            <View style={styles.PickerView}>
                <Picker
                    selectedValue={this.state.setor_selecionado}
                    style={styles.picker}
                    onValueChange={(itemValue, itemIndex) =>
                        this.setState({ setor_selecionado: itemValue})
                    }
                >
                    {this.state.setor.map((item, index) => {
                        return (
                            <Picker.Item
                                label={item.setor}
                                value={item.setor}
                                key={index}
                            />
                        );
                    })}
                </Picker>
    </View>
        )
    }
}

const styles = StyleSheet.create({
    PickerView:{
        marginTop: 5,
        backgroundColor: '#ccc',
        alignItems:'center',
        width: '90%',
        borderRadius: 7
    },
    picker:{
        width: '100%'
    }
});

I am using this component within a function that is on another page:

export default function cadastroAdm(){
     const [nome, setNome] = useState('');
     const [setor, setSetor] = useState('');
    
     <View>
       <TextInput
          style={styles.input}
          placeholder="Nome completo"
          autoCorrect={false}
          onChangeText={(nome)=> setNome(nome)}
          value={nome}
        />

         <PickerCadastroAdm/>
     </View>
}

I need to take the amount that was selected and go through where I’m calling the component, how can I do this?

Answer 1

You can use the component properties to pass the selected value and the function that updates this value.

1. Remove from the constructor the status setor_selecionado.

// PickerCadastroAdm.js

constructor() {
  super();
  this.state = {
    setor:[]
  };
  // Restante do código
}

2. Update the component props Picker located in functionrender.

  <Picker
    selectedValue={this.props.setor}
    style={styles.picker}
    onValueChange={(itemValue) => this.props.setSetor(itemValue)}
  >

3. Now pass the state of the component CadastroAdm for the props of the component PickerCadastroAdm.

// CadastroAdm.js

<PickerCadastroAdm
  setor={setor}
  setSetor={setSetor}
/>