CODEWITHSUNDEEP
javascriptreactjs
Rohit Verma
Rohit Verma

Reputation: 3783

react post request using axios is not working properly

I have few data and now i want to save it in database using axios post in react.

I have two fields but in both fields coming same data, dont know whats wrong here.

My Code:

 state = {
        salonName: '',
        locationCity: '',
  };
  handleChange = event => {
        this.setState({ salonName: event.target.value });
        this.setState({ locationCity: event.target.value });
};
 handleSubmit = event => {
        event.preventDefault();
        const salonData = {
            salonName: this.state.salonName,
            locationCity: this.state.locationCity,
 };
 axios({
                method: "post",
                url: "http://localhost:4200/addsalon",
                headers: {},
                data: {
                    salonName: salonData.salonName,
                    locationCity: salonData.locationCity,
  },
                });
                }
render() {
        return (
<div>
<input type="text" className="form-control" placeholder="Enter Salon Name..." name="salonName" onChange={this.handleChange} />
<input type="text" className="form-control" placeholder="Enter City" name="locationCity"  onChange={this.handleChange} />
</div>

but i'm getting same value in database like given below:- {"_id":"60ac7dd4ccfa1c07a8df84d8","salonName":"Delhi","locationCity":"Delhi","__v":0}]

ThankYou for your efforts!

Upvotes: 0

Views: 47

Answers (1)

Anuresh Verma
Anuresh Verma

Reputation: 1058

The problem in handle change. you updating both with same if anyone changes

 handleChange = event => {
        if(event.target.name ===='salonName'){
        this.setState({ salonName: event.target.value });
        }else if(event.target.name ===='locationCity'){
        this.setState({ locationCity: event.target.value });
        }
};

Upvotes: 1

Related Questions