CODEWITHSUNDEEP
javascriptfirebasereact-nativefirebase-realtime-database
Velihan
Velihan

Reputation: 95

Firebase is getting the data letter-by-letter as I'm typing(without clicking the "UPDATE"), instead of a whole string

Hi there I am actually a beginner and working on my React Native project and I also use Firebase within React Native. I got a problem like I've stated in title, the Realtime Database in Firebase gets the "Name", "Surname" and "Birthday" data exactly like this;

Image

I want the Firebase to get my data only once as a whole string as "Name" when i click "UPDATE", not letter by letter like "N" first then "Na"... etc.(this situaton applies for "Name", "Surname" and "Birthday" data as well.).

And Here's my code:

class Profile extends Component {
  onChangeName(profile) {
    this.props.updateProfile(profile);
  }

  onChangeSurname(profile) {
    this.props.updateProfile(profile);
  }

  updateProfile() {
    this.props.updateProfile(this.props.profile);
  }

  render() {
    return (
      <View>
        <Profiletext
          placeholder="Name..."
          onChangeText={this.onChangeName.bind(this)}
        />
        <Profiletext
          placeholder="Surname..."
          onChangeText={this.onChangeSurname.bind(this)}
        />
        <Profiletext
          placeholder="Birthday..."
          onChangeText={this.onChangeSurname.bind(this)}
        />
        <MyButton
          spinner={false}
          title="UPDATE"
          onPress={this.updateProfile.bind(this)}
          color="#E87B79"
        />
      </View>
    );
  }
}

const mapStateToProps = state => {
  const {profile} = state.profileForm;
  return {
    profile,
  };
};

export default connect(
  mapStateToProps,
  {
    changeProfile,
    updateProfile,
  },
)(Profile);

Upvotes: 0

Views: 97

Answers (1)

Zabi Babar
Zabi Babar

Reputation: 384

I am going to assume that your updateProfile is making the database call to update the data. However the issue is that you are making a call to updateProfile every time the input is changing because of onChange functions on inputs.

Instead you can have state that holds Name, Surname, and Birthday and you can update the state on onChange call. And when the user clicks the button, you can update the profile with state and then call updateProfile. 

class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Name: "",
      SurName: "",
      Birthday: "",
    };
  }

  onFieldChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  updateProfile() {
    // update profile with new Name, Surname, and Birthday
    this.props.profile.name = this.state.Name;
    this.props.profile.surName = this.state.SurName;
    this.props.profile.birthday = this.state.Birthday;
    this.props.updateProfile(this.props.profile);
  }

  render() {
    return (
      <View>
        <Profiletext
          name="Name"
          placeholder="Name..."
          onChangeText={this.onFieldChange.bind(this)}
        />
        <Profiletext
          name="SurName"
          placeholder="Surname..."
          onChangeText={this.onFieldChange.bind(this)}
        />
        <Profiletext
          name="Birthday"
          placeholder="Birthday..."
          onChangeText={this.onFieldChange.bind(this)}
        />
        <MyButton
          spinner={false}
          title="UPDATE"
          onPress={this.updateProfile.bind(this)}
          color="#E87B79"
        />
      </View>
    );
  }
}

Upvotes: 1

Related Questions