How popular a Database Data Picker (Firebase) - React Native

Question

I’m trying to popular this Picker with BD data (for when the person wants to delete, she choose by title), but it n fills in, and I don’t know if I’m doing it right. thanks for the help! :)

export default class delanuncio extends Component {

  constructor() {
    super();
    this.state = {
      titulo:[]
    };
    firebase.auth().onAuthStateChanged((user)=>{
      if(user){
        firebase.database().ref('Tarefas').child(user.uid).once('value', (snapshot)=>{
          let state = this.state;
          state.titulo =[];

          snapshot.forEach((childItem)=>{
              state.titulo.push({
              key: childItem.key,
              titulo:childItem.val().titulo
            });
          });
          this.setState(state);
        });
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>

        <Text style={styles.logoText}>Deletar Anuncio</Text>
        <Text>{'\n'}</Text>
        <Text style={styles.texto}>Titulo do Anuncio:</Text>
        <Picker
          selectedValue={this.state.titulo}
          style={styles.picker}
          onValueChange={({itemValue}, itemIndex) => <Picker.Item key={titulo} label={titulo} value={titulo} />
          }>          

        </Picker>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Deletar Anuncio</Text>
        </TouchableOpacity>

      </View>
    );
  }
}

Answer 1

From what I’ve seen of your code, Picker elements are from an array called "title" within your state.

I recommend you create in the state a field called "selectedtitulo_" to save the chosen value in Picker.

this.state = {
titulo:[],
 titulo_selecionado: ""
 };

To display this contents of the "title" array in Picker, you would have to do the following:

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

In the above code, I changed the "onValueChange" to update the state with the value of the selected item.