How to Fill In My Fields with Data Selected by Picker and Update Data - React Native

Question

How can I make so that when the "title" of the task is selected through the Picker it fills my other fields belonging to this task and can update my data? thanks for your help ;)

export default class atualizaranuncio extends Component {

  constructor() {
    super();
    this.state = {
      status: '',
      titulo: [],
      titulo_selecionado: ""
    };
    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}>Atualizar o Anuncio</Text>
        <Text>{'\n'}</Text>
        <Text style={styles.texto}>Titulo do Anuncio:</Text>
        <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>
        <Text style={styles.texto}>Descrição do Anuncio:</Text>
        <TextInput style={styles.inputBox}
          underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Descrição"
          placeholderTextColor="#ffffff"
          selectionColor="#fff"
        />
        <Text style={styles.texto}>Valor do Anuncio:</Text>
        <TextInput style={styles.inputBox}
          underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="R$0000,00"
          placeholderTextColor="#ffffff"
          selectionColor="#fff"
          keyboardType="number-pad"
        />
        <Text style={styles.texto}>Status:</Text>
        <Picker
          selectedValue={this.state.status}
          style={styles.picker}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ status: itemValue })
          }>
          <Picker.Item label="Não realizado" value="1" />
          <Picker.Item label="Realizado" value="0" />
        </Picker>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Atualizar Anuncio</Text>
        </TouchableOpacity>

      </View>
    );
  }
}

Answer 1

As I don’t know the return of your "Tasks" object, I’m guessing it has the status, description and value

On that basis, the amendments would be as follows::

1 - Add description and value in the state

2 - When loop to mount the title array, add new information.

3 - In the onValueChange of the Picker Title a function has been added that takes as parameter what has been selected. The function checks in the title array and when it locates the record, updates the state.

4 - For Textinput to receive state data, the value property was used.

Your code would look like this:

export default class atualizaranuncio extends Component {
  
  constructor() {
    super();
    this.state = {
      status: '',
	  descricao: '',
	  valor: '',
      titulo: [],
      titulo_selecionado: ""
    };
    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,
			  status: //Adicionar o campo,
			  descricao: //Adicionar o campo,
			  valor: //Adicionar o campo,
            });
          });
          this.setState(state);
        });
      }
    });
  }
  
  RetornarDadosAnuncio = (titulo) => {
	this.state.titulo.map((item, index) => {
		if (item.titulo == titulo){
			//Atualizar os campos do formulario
			this.setState(titulo_selecionado: titulo, status: item.status, descricao: item.descricao, valor: item.valor);
        } 
      }  
   } 

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

        <Text style={styles.logoText}>Atualizar o Anuncio</Text>
        <Text>{'\n'}</Text>
        <Text style={styles.texto}>Titulo do Anuncio:</Text>
        <Picker
          selectedValue={this.state.titulo_selecionado}
          style={styles.picker}
          onValueChange={(itemValue, itemIndex) => this.RetornarDadosAnuncio(itemValue)}>
          {this.state.titulo.map((item, index) => {
            return (
              <Picker.Item label={item.titulo} value={item.titulo} key={index}/>
            );
          })}
        </Picker>
        <Text style={styles.texto}>Descrição do Anuncio:</Text>
        <TextInput style={styles.inputBox}
          underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Descrição"
          placeholderTextColor="#ffffff"
          selectionColor="#fff"
		  value={this.state.descricao}
        />
        <Text style={styles.texto}>Valor do Anuncio:</Text>
        <TextInput style={styles.inputBox}
          underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="R$0000,00"
          placeholderTextColor="#ffffff"
          selectionColor="#fff"
          keyboardType="number-pad"
		  value={this.state.valor}
        />
        <Text style={styles.texto}>Status:</Text>
        <Picker
          selectedValue={this.state.status}
          style={styles.picker}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ status: itemValue })
          }>
          <Picker.Item label="Não realizado" value="1" />
          <Picker.Item label="Realizado" value="0" />
        </Picker>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Atualizar Anuncio</Text>
        </TouchableOpacity>

      </View>
    );
  }
}