_this.showModal is not a function because of ref in reactjs

_this.showModal is not a function because of ref in reactjs - javascript

I'm opening otp modal component in login register page by using ref. I have created ref this.otpModalRef = React.createRef(); in constructor and calling this.showModal in register api success but it giving undefined below is my code. If I removed this.otpModalRef = React.createRef(); from constructor then modal works but when I click on login then it gives onOpenModal undefined. So I have to createRef in constructor. Any idea why is happening? I'm new to reactjs
below is my code
static contextTypes = {
router: PropTypes.object
}
constructor(props,context){
super(props,context);
this.state = {
fname:'',
lname:'',
emailaddress:'',
password:'',
mobile:'',
user:'',
login_pass:''
}
this.regi_data = this.regi_data.bind(this);
this.login_data = this.login_data.bind(this);
this.otpModalRef = React.createRef();
}
regi_data(e){
this.setState({[e.target.name] : e.target.value}
);
}
login_data(e){
this.setState({[e.target.name] : e.target.value})
}
otpModalRef = ({onOpenModal}) => {
this.showModal = onOpenModal;
}
componentDidMount(){
}
login = (e) => {
e.preventDefault();
axios.post('/api/signin', {
user:this.state.user,
password:this.state.login_pass,
})
.then(res => {
console.log(res);
this.context.router.history.push({
pathname:'/',
});
})
.catch(function (error) {
console.log(error.message);
})
}
register = (e,ref) => {
e.preventDefault();
axios.post('/api/user/add', {
firstname: this.state.fname,
lastname:this.state.lname,
email:this.state.emailaddress,
password:this.state.password,
mobile:this.state.mobile
},
)
.then(res => {
console.log(res);
this.showModal();
})
}
Below is render code
render(){
return(
<div className="kr-logincontent">
<div className="kr-themetabs">
<ul className="kr-tabnavloginregistered" role="tablist">
<li role="presentation" className="active">Log in</li>
<li role="presentation" className="">Register</li>
</ul>
<div className="tab-content kr-tabcontentloginregistered">
<div role="tabpanel" className="tab-pane fade active in" id="kr-loging">
<form onSubmit={this.login} className="kr-formtheme kr-formlogin">
<fieldset>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input value={this.state.user} onChange={this.login_data} type="text" name="user" className="form-control" placeholder="Username Or Email"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-icons208"></i>
<input value={this.state.login_pass}onChange={this.login_data} type="password" name="login_pass" className="form-control" placeholder="Password"/>
</div>
<div className="form-group">
<div className="kr-checkbox">
<input type="checkbox" name="remember" id="rememberpass2"/>
<label htmlFor="rememberpass2">Remember me</label>
</div>
<span>Lost your Password?</span>
</div>
<button className="kr-btn kr-btngreen" >login</button>
</fieldset>
</form>
</div>
<div role="tabpanel" className="tab-pane fade " id="kr-register">
<form onSubmit={this.register} className="kr-formtheme kr-formlogin">
<fieldset>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input type="text" onChange={this.regi_data} value={this.state.fname} name="fname" className="form-control" placeholder="Firstname"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input type="text" onChange={this.regi_data} value={this.state.lname} name="lname" className="form-control" placeholder="Lastname"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-icons208"></i>
<input type="email" onChange={this.regi_data} value={this.state.emailaddress} name="emailaddress" className="form-control" placeholder="Email Address"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-lock-stripes"></i>
<input type="password" onChange={this.regi_data} value={this.state.password} name="password" className="form-control" placeholder="Password"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-phone"></i>
<input type="number" onChange={this.regi_data} value={this.state.mobile} name="mobile" className="form-control" placeholder="Mobile"/>
</div>
<button className="kr-btn kr-btngreen">Register</button>
</fieldset>
</form>
</div>
</div>
</div>
<div className="kr-shareor"><span>or</span></div>
<div className="kr-signupwith">
<h2>Sign in With...</h2>
<ul className="kr-signinloginwithsocialaccount">
<li className="kr-facebook"><i className="icon-facebook-1"></i><span>Facebook</span></li>
<li className="kr-twitter"><i className="icon-twitter-1"></i><span>Twitter</span></li>
<li className="kr-googleplus"><i className="icon-google4"></i><span>Google +</span></li>
</ul>
</div>
<div className="otp_modal">
<Otp ref={this.otpModalRef} ></Otp>
</div>
</div>
)
}

First point is that below code overwrites your created ref in your constructor.
otpModalRef = ({onOpenModal}) => {
this.showModal = onOpenModal;
}
second point is that you need to define this.showModal = null in your constructor.
could you provide render function and JSX code please?
I hope it helps you a bit to change your implementation.

static contextTypes = {
router: PropTypes.object
}
constructor(props,context){
super(props,context);
this.state = {
fname:'',
lname:'',
emailaddress:'',
password:'',
mobile:'',
user:'',
login_pass:''
}
this.otpModalRef = React.createRef();
}
regi_data = (e) => {
this.setState({[e.target.name] : e.target.value}
);
}
login_data = (e) => {
this.setState({[e.target.name] : e.target.value})
}
showModal = () => {
this.otpModalRef.onOpenModal();
//or
//this.otpModalRef.current.onOpenModal();
}
login = (e) => {
e.preventDefault();
axios.post('/api/signin', {
user:this.state.user,
password:this.state.login_pass,
})
.then(res => {
console.log(res);
this.context.router.history.push({
pathname:'/',
});
})
.catch(function (error) {
console.log(error.message);
})
}
register = (e,ref) => {
e.preventDefault();
axios.post('/api/user/add', {
firstname: this.state.fname,
lastname:this.state.lname,
email:this.state.emailaddress,
password:this.state.password,
mobile:this.state.mobile
},
)
.then(res => {
console.log(res);
this.showModal();
})
}
render(){
return(
<div className="kr-logincontent">
<div className="kr-themetabs">
<ul className="kr-tabnavloginregistered" role="tablist">
<li role="presentation" className="active">Log in</li>
<li role="presentation" className="">Register</li>
</ul>
<div className="tab-content kr-tabcontentloginregistered">
<div role="tabpanel" className="tab-pane fade active in" id="kr-loging">
<form onSubmit={this.login} className="kr-formtheme kr-formlogin">
<fieldset>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input value={this.state.user} onChange={this.login_data} type="text" name="user" className="form-control" placeholder="Username Or Email"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-icons208"></i>
<input value={this.state.login_pass}onChange={this.login_data} type="password" name="login_pass" className="form-control" placeholder="Password"/>
</div>
<div className="form-group">
<div className="kr-checkbox">
<input type="checkbox" name="remember" id="rememberpass2"/>
<label htmlFor="rememberpass2">Remember me</label>
</div>
<span>Lost your Password?</span>
</div>
<button className="kr-btn kr-btngreen" >login</button>
</fieldset>
</form>
</div>
<div role="tabpanel" className="tab-pane fade " id="kr-register">
<form className="kr-formtheme kr-formlogin">
<fieldset>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input type="text" onChange={this.regi_data} value={this.state.fname} name="fname" className="form-control" placeholder="Firstname"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input type="text" onChange={this.regi_data} value={this.state.lname} name="lname" className="form-control" placeholder="Lastname"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-icons208"></i>
<input type="email" onChange={this.regi_data} value={this.state.emailaddress} name="emailaddress" className="form-control" placeholder="Email Address"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-lock-stripes"></i>
<input type="password" onChange={this.regi_data} value={this.state.password} name="password" className="form-control" placeholder="Password"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-phone"></i>
<input type="number" onChange={this.regi_data} value={this.state.mobile} name="mobile" className="form-control" placeholder="Mobile"/>
</div>
<button onClick={this.register} className="kr-btn kr-btngreen">Register</button>
</fieldset>
</form>
</div>
</div>
</div>
<div className="kr-shareor"><span>or</span></div>
<div className="kr-signupwith">
<h2>Sign in With...</h2>
<ul className="kr-signinloginwithsocialaccount">
<li className="kr-facebook"><i className="icon-facebook-1"></i><span>Facebook</span></li>
<li className="kr-twitter"><i className="icon-twitter-1"></i><span>Twitter</span></li>
<li className="kr-googleplus"><i className="icon-google4"></i><span>Google +</span></li>
</ul>
</div>
<div className="otp_modal">
<Otp ref={this.otpModalRef} ></Otp>
</div>
</div>
)
}
router: PropTypes.object
}
constructor(props,context){
super(props,context);
this.state = {
fname:'',
lname:'',
emailaddress:'',
password:'',
mobile:'',
user:'',
login_pass:''
}
this.otpModalRef = React.createRef();
}
regi_data = (e) => {
this.setState({[e.target.name] : e.target.value}
);
}
login_data = (e) => {
this.setState({[e.target.name] : e.target.value})
}
showModal = () => {
this.otpModalRef.onOpenModal();
//or
//this.otpModalRef.current.onOpenModal();
}
login = (e) => {
e.preventDefault();
axios.post('/api/signin', {
user:this.state.user,
password:this.state.login_pass,
})
.then(res => {
console.log(res);
this.context.router.history.push({
pathname:'/',
});
})
.catch(function (error) {
console.log(error.message);
})
}
register = (e,ref) => {
e.preventDefault();
axios.post('/api/user/add', {
firstname: this.state.fname,
lastname:this.state.lname,
email:this.state.emailaddress,
password:this.state.password,
mobile:this.state.mobile
},
)
.then(res => {
console.log(res);
this.showModal();
})
}

Related

How can i pull form values to another page

How can I get the email address entered while registering to this next page? If the query method is appropriate, it is my preference. I want to pull the e-mail address I entered on the signUp page to the verify Code page.
VerifyCode.vue
<template>
<Form
#submit="onVerifyCode"
id="kt_verifyCode_form"
>
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Code</label>
<Field
class="form-control form-control-lg"
type="text"
name="code"
autocomplete="off"
v-model="code"
/>
</div>
<div class="text-center">
<button
id="kt_verifyCode_submit"
ref="submitButton"
type="submit"
class="btn btn-lg btn-primary mt-4"
>
<span class="indicator-label"> Submit </span>
</button>
</div>
</Form>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: "verifyCode",
data() {
return {
code: "",
};
},
setup() {
const store = useStore();
const router = useRouter();
const onVerifyCode = async (values) => {
// Clear existing errors
store.dispatch(Actions.LOGOUT);
// eslint-disable-next-line
submitButton.value!.disabled = true;
// Activate indicator
submitButton.value?.setAttribute("data-kt-indicator", "on");
const data = {
code: values.code,
};
// Send verify code request
await store.dispatch(Actions.VERIFY_CODE, data);
const [errorName] = Object.keys(store.getters.getErrors);
const error = store.getters.getErrors[errorName];
if (!error) {.then(function () {
// Go to page after successfully login
router.push({ name: "projects" });
});
} else {}
submitButton.value?.removeAttribute("data-kt-indicator");
// eslint-disable-next-line
submitButton.value!.disabled = false;
};
return {
verifyCode,
onVerifyCode,
submitButton,
};
},
});
</script>
SignUp.vue
<template>
<Form
#submit="onSubmitRegister"
id="kt_login_signup_form"
>
<!--begin::Input group-->
<div class="row fv-row mb-7">
<!--begin::Col-->
<div class="col-xl-6">
<label class="form-label fw-bold text-dark fs-6">First Name</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="givenName"
autocomplete="off"
v-model="givenName"
/>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-xl-6">
<label class="form-label fw-bold text-dark fs-6">Last Name</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="familyName"
autocomplete="off"
v-model="familyName"
/>
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Company</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="companyName"
autocomplete="off"
v-model="companyName"
/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Email</label>
<Field
class="form-control form-control-lg"
type="email"
placeholder=""
name="email"
autocomplete="off"
v-model="email"
/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10 fv-row" data-kt-password-meter="true">
<!--begin::Wrapper-->
<div class="mb-1">
<!--begin::Label-->
<label class="form-label fw-bold text-dark fs-6"> Password </label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative mb-3">
<Field
class="form-control form-control-lg"
type="password"
placeholder=""
name="password"
autocomplete="off"
v-model="password"
/>
</div>
<!--end::Input wrapper-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group--->
<!--begin::Input group-->
<div class="fv-row mb-5">
<label class="form-label fw-bold text-dark fs-6"
>Confirm Password</label
>
<Field
class="form-control form-control-lg"
type="password"
placeholder=""
name="password_confirmation"
autocomplete="off"
v-model="password_confirmation"
/>
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="text-center">
<button
id="kt_sign_up_submit"
ref="submitButton"
type="submit"
class="btn btn-lg btn-primary mt-4"
>
<span class="indicator-label"> Submit </span>
</button>
</div>
</Form>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: "sign-up",
data() {
return {
givenName: "",
familyName: "",
companyName: "",
email: "",
password: "",
password_confirmation: "",
};
},
setup() {
const store = useStore();
const router = useRouter();
const submitButton = ref<HTMLButtonElement | null>(null);
const onSubmitRegister = async (values) => {
// Clear existing errors
store.dispatch(Actions.LOGOUT);
// eslint-disable-next-line
submitButton.value!.disabled = true;
// Activate indicator
submitButton.value?.setAttribute("data-kt-indicator", "on");
const data = {
givenName: values.givenName,
familyName: values.familyName,
companyName: values.companyName,
email: values.email,
password: values.password,
confirmPassword: values.confirmPassword,
};
// Send login request
await store.dispatch(Actions.REGISTER, data);
const [errorName] = Object.keys(store.getters.getErrors);
const error = store.getters.getErrors[errorName];
if (!error) {
.then(function () {
// Go to page after successfully register
router.push({ name: "verifyCode" });
});
} else {}
submitButton.value?.removeAttribute("data-kt-indicator");
// eslint-disable-next-line
submitButton.value!.disabled = false;
};
return {
registration,
onSubmitRegister,
submitButton,
};
},
});
</script>

As #kissu, mentioned On SignUp page, you can use $router to route to the verifyCode page with query equal to email
router.push({ name: "verifyCode", query: { email: values.email } });
And in VerifyCode page you can get the query value with
const route = useRoute();
//log the email value.
console.log(route.query.email)
FULL EXAMPLE OF CODE.
VerifyCode.vue
<template>
<Form
#submit="onVerifyCode"
id="kt_verifyCode_form"
>
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Code</label>
<Field
class="form-control form-control-lg"
type="text"
name="code"
autocomplete="off"
v-model="code"
/>
</div>
<div class="text-center">
<button
id="kt_verifyCode_submit"
ref="submitButton"
type="submit"
class="btn btn-lg btn-primary mt-4"
>
<span class="indicator-label"> Submit </span>
</button>
</div>
</Form>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: "verifyCode",
data() {
return {
code: "",
};
},
setup() {
const store = useStore();
const router = useRouter();
// log the email value.
console.log(router.query.email)
const onVerifyCode = async (values) => {
// Clear existing errors
store.dispatch(Actions.LOGOUT);
// eslint-disable-next-line
submitButton.value!.disabled = true;
// Activate indicator
submitButton.value?.setAttribute("data-kt-indicator", "on");
const data = {
code: values.code,
};
// Send verify code request
await store.dispatch(Actions.VERIFY_CODE, data);
const [errorName] = Object.keys(store.getters.getErrors);
const error = store.getters.getErrors[errorName];
if (!error) {.then(function () {
// Go to page after successfully login
router.push({ name: "projects" });
});
} else {}
submitButton.value?.removeAttribute("data-kt-indicator");
// eslint-disable-next-line
submitButton.value!.disabled = false;
};
return {
verifyCode,
onVerifyCode,
submitButton,
};
},
});
</script>
SignUp.vue
<template>
<Form
#submit="onSubmitRegister"
id="kt_login_signup_form"
>
<!--begin::Input group-->
<div class="row fv-row mb-7">
<!--begin::Col-->
<div class="col-xl-6">
<label class="form-label fw-bold text-dark fs-6">First Name</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="givenName"
autocomplete="off"
v-model="givenName"
/>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-xl-6">
<label class="form-label fw-bold text-dark fs-6">Last Name</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="familyName"
autocomplete="off"
v-model="familyName"
/>
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Company</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="companyName"
autocomplete="off"
v-model="companyName"
/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Email</label>
<Field
class="form-control form-control-lg"
type="email"
placeholder=""
name="email"
autocomplete="off"
v-model="email"
/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10 fv-row" data-kt-password-meter="true">
<!--begin::Wrapper-->
<div class="mb-1">
<!--begin::Label-->
<label class="form-label fw-bold text-dark fs-6"> Password </label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative mb-3">
<Field
class="form-control form-control-lg"
type="password"
placeholder=""
name="password"
autocomplete="off"
v-model="password"
/>
</div>
<!--end::Input wrapper-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group--->
<!--begin::Input group-->
<div class="fv-row mb-5">
<label class="form-label fw-bold text-dark fs-6"
>Confirm Password</label
>
<Field
class="form-control form-control-lg"
type="password"
placeholder=""
name="password_confirmation"
autocomplete="off"
v-model="password_confirmation"
/>
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="text-center">
<button
id="kt_sign_up_submit"
ref="submitButton"
type="submit"
class="btn btn-lg btn-primary mt-4"
>
<span class="indicator-label"> Submit </span>
</button>
</div>
</Form>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: "sign-up",
data() {
return {
givenName: "",
familyName: "",
companyName: "",
email: "",
password: "",
password_confirmation: "",
};
},
setup() {
const store = useStore();
const router = useRouter();
const submitButton = ref<HTMLButtonElement | null>(null);
const onSubmitRegister = async (values) => {
// Clear existing errors
store.dispatch(Actions.LOGOUT);
// eslint-disable-next-line
submitButton.value!.disabled = true;
// Activate indicator
submitButton.value?.setAttribute("data-kt-indicator", "on");
const data = {
givenName: values.givenName,
familyName: values.familyName,
companyName: values.companyName,
email: values.email,
password: values.password,
confirmPassword: values.confirmPassword,
};
// Send login request
await store.dispatch(Actions.REGISTER, data);
const [errorName] = Object.keys(store.getters.getErrors);
const error = store.getters.getErrors[errorName];
if (!error) {
.then(function () {
// Go to page after successfully register
router.push({ name: "verifyCode", query: { email: values.email } });
});
} else {}
submitButton.value?.removeAttribute("data-kt-indicator");
// eslint-disable-next-line
submitButton.value!.disabled = false;
};
return {
registration,
onSubmitRegister,
submitButton,
};
},
});
</script>

In SignUp.vue, you can use
router.push({ name: 'verifyCode', query: { secureToken: 'abc' } })
And in the receiving component, you can use
const route = useRoute() // route here, not router
route.query.secureToken
Router is used to navigate, while route is used to access some info regarding your path/query/etc...

Doing real-time calculations in a form in react js components

I'm a new user to React and I'm having trouble with my app.. Basically I want to do some calculation when the user input some values it dynamically outputs the amount. The calculation should add the packaging amt with transport amt and subtract the discount amt, the result is then added to the product of kgs with price per kg to show the total amt. . If anyone can help me with this it would be very much appreciated. My code is included below `
import React from "react";
import APIHandler from "../utils/APIHandler";
import { Link } from "react-router-dom";
import AutoCompleteCustomer from "../components/AutoCompleteCustomer";
class HomeComponent extends React.Component {
constructor(props) {
super(props);
this.formSubmit = this.formSubmit.bind(this);
}
state = {
errorRes: false,
errorMessage: "",
btnMessage: 0,
sendData: false,
farmerlist: [],
customersDetails: [{
phone: "",
name: "",
}],
dataLoaded: false,
value: ""
};
async formSubmit(event) {
event.preventDefault();
this.setState({ btnMessage: 1 });
var apiHandler = new APIHandler();
var response = await apiHandler.saveOrdersData(
event.target.phone.value,
event.target.id.value,
event.target.town.value,
event.target.region.value,
event.target.kgs.value,
event.target.packaging.value,
event.target.discount.value,
event.target.transport.value,
event.target.comment.value,
event.target.farmer_id.value,
event.target.price.value,
event.target.amount.value,
);
console.log(response);
this.setState({ btnMessage: 0 });
this.setState({ errorRes: response.data.error });
this.setState({ errorMessage: response.data.message });
this.setState({ sendData: true });
}
//This Method Work When Our Page is Ready
componentDidMount() {
this.LoadFarmer();
}
async LoadFarmer() {
var apihandler = new APIHandler();
var farmerdata = await apihandler.fetchFarmerOnly();
this.setState({ farmerlist: farmerdata.data });
}
showDataInInputs = (index, item) => {
console.log(index);
console.log(item);
this.setState.customersDetails[index].phone = item.phone;
this.setState.customersDetails[index].id = item.id;
}
viewRequestDetails = (request_id) => {
console.log(request_id);
console.log(this.props);
this.props.history.push("/ordersDetails/" + request_id);
};
qtyChangeUpdate = (event) => {
var value = event.target.value;
this.state.total =
((parseInt(this.state.packaging) +
parseInt(this.state.transport) -
parseInt(this.state.discount)) +
(parseInt(this.state.kgs) * parseInt(this.state.price))) * value;
this.state.amount = value;
this.setState({});
};
render() {
return (
<section className="content">
<div className="container-fluid">
<div className="block-header">
<h2>MANAGE ORDERS & CUSTOMERS</h2>
</div>
<div className="row clearfix">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="card">
<div className="header">
<h2>Add Order</h2>
<ul className="header-dropdown m-r--5">
<Link to="/addcustomer" className="toggled waves-effect waves-block">
<button className="btn btn-primary m-r-15 waves-effect">
Add Customer
</button>
</Link>
</ul>
</div>
<div className="body">
<form onSubmit={this.formSubmit}>
{this.state.customersDetails.map((item, index) => (
<div className="row" key={index}>
<div className="col-lg-6">
<label htmlFor="email_address">
Phone No.{" "}
</label>
<div className="form-group">
<div className="form-line">
<AutoCompleteCustomer
itemPostion={index}
showDataInInputs={this.showDataInInputs}
/>
</div>
</div>
</div>
<div className="col-lg-6">
<label htmlFor="email_address">Customer Name</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="id"
name="id"
className="form-control"
placeholder="Enter Customer Name"
defaultValue={item.id}
data-index={index}
/>
</div>
</div>
</div>
</div>
))}
<div className="row">
<div className="col-lg-4">
<label htmlFor="email_address">Town</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="town"
name="town"
className="form-control"
placeholder="Enter Customer Town"
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Region</label>
<div className="form-group">
<div className="form-line">
<select id="region" name="region" className="form-control show-tick">
<option value="1">Nairobi</option>
<option value="2">Nyanza</option>
<option value="3">Central</option>
<option value="4">Coast</option>
<option value="5">Eastern</option>
<option value="6">North Eastern</option>
<option value="7">Western</option>
<option value="8">Rift Valley</option>
</select>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Kgs : </label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="kgs"
name="kgs"
className="form-control"
placeholder="Enter Quantity."
defaultValue={this.state.kgs}
onChange={this.qtyChangeUpdate}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Packaging</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="packaging"
name="packaging"
className="form-control"
placeholder="Enter Amount"
defaultValue={this.state.packaging}
onChange={this.qtyChangeUpdate}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Discount.</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="discount"
name="discount"
className="form-control"
placeholder="Enter Discount."
defaultValue={this.state.discount}
onChange={this.qtyChangeUpdate}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Transport</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="transport"
name="transport"
className="form-control"
placeholder="Enter Transport."
defaultValue={this.state.transport}
onChange={this.qtyChangeUpdate}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Comment</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="comment"
name="comment"
className="form-control"
placeholder="Enter Comment"
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Farmer Name</label>
<div className="form-group">
<select className="form-control show-tick"
id="farmer_id"
name="farmer_id"
>
{this.state.farmerlist.map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
))}
</select>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Price per Kg</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="price"
name="price"
className="form-control"
placeholder="Enter Price"
defaultValue={this.state.price}
onChange={this.qtyChangeUpdate}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Amount</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="amount"
name="amount"
className="form-control"
placeholder="Enter Amount"
value={this.state.amount}
onChange={this.qtyChangeUpdate}
/>
</div>
</div>
</div>
</div>
<br />
<button
type="submit"
className="btn btn-success m-t-15 waves-effect "
disabled={this.state.btnMessage === 0 ? false : true}
>
{this.state.btnMessage === 0
? "Add Order"
: "Adding Order Please Wait.."}
</button>
<br />
{this.state.errorRes === false &&
this.state.sendData === true ? (
<div className="alert alert-success">
<strong>Success!</strong> {this.state.errorMessage}.
</div>
) : (
""
)}
{this.state.errorRes === true &&
this.state.sendData === true ? (
<div className="alert alert-danger">
<strong>Failed!</strong>
{this.state.errorMessage}.
</div>
) : (
""
)}
</form>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
}
export default HomeComponent;

I managed to get this working by using setState an binding event to the form
import React from "react";
import APIHandler from "../utils/APIHandler";
import { Link } from "react-router-dom";
import AutoCompleteCustomer from "../components/AutoCompleteCustomer";
class HomeComponent extends React.Component {
constructor(props) {
super(props);
this.formSubmit = this.formSubmit.bind(this);
this.updateKgs = this.updateKgs.bind(this);
this.updatePackaging = this.updatePackaging.bind(this);
this.updateDiscount = this.updateDiscount.bind(this);
this.updateTransport = this.updateTransport.bind(this);
this.updatePrice = this.updatePrice.bind(this);
this.formRef = React.createRef();
}
state = {
errorRes: false,
errorMessage: "",
btnMessage: 0,
sendData: false,
farmerlist: [],
kgs: "",
price: "",
packaging: "",
discount: "",
transport: "",
amount: "",
customersDetails: [
{
id: 0,
phone: "",
name: "",
customer_id: "",
},
],
dataLoaded: false,
};
async formSubmit(event) {
event.preventDefault();
this.setState({ btnMessage: 1 });
var apiHandler = new APIHandler();
var response = await apiHandler.saveOrdersData(
event.target.phone.value,
event.target.name.value,
event.target.customer_id.value,
event.target.town.value,
event.target.region.value,
event.target.kgs.value,
event.target.packaging.value,
event.target.discount.value,
event.target.transport.value,
event.target.comment.value,
event.target.farmer_id.value,
event.target.rice_type.value,
event.target.price.value,
event.target.amount.value,
);
console.log(response);
this.setState({ btnMessage: 0 });
this.setState({ errorRes: response.data.error });
this.setState({ errorMessage: response.data.message });
this.setState({ sendData: true });
this.formRef.current.reset();
}
//This Method Work When Our Page is Ready
componentDidMount() {
this.LoadFarmer();
}
async LoadFarmer() {
var apihandler = new APIHandler();
var farmerdata = await apihandler.fetchFarmerOnly();
this.setState({ farmerlist: farmerdata.data });
}
showDataInInputs = (index, item) => {
console.log(index);
console.log(item);
this.state.customersDetails[index].id = item.id;
this.state.customersDetails[index].phone = item.phone;
this.state.customersDetails[index].name = item.name;
this.state.customersDetails[index].customer_id = item.id;
this.setState({})
}
updateKgs = (event) => {
this.setState({
kgs: event.target.value
});
}
updatePackaging = (event) => {
this.setState({
packaging: event.target.value
});
console.log(this.state.packaging)
}
updateDiscount = (event) => {
this.setState({
discount: event.target.value
});
}
updateTransport = (event) => {
this.setState({
transport: event.target.value
});
}
updatePrice = (event) => {
this.setState({
price: event.target.value
});
}
updateAmount = () => {
this.setState({
amount: (Number(this.state.kgs) * Number(this.state.price)) + Number(this.state.packaging) + Number(this.state.transport) - Number(this.state.discount)
});
}
render() {
return (
<section className="content">
<div className="container-fluid">
<div className="block-header">
<h2>ADD ORDERS & CUSTOMERS</h2>
</div>
<div className="row clearfix">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="card">
<div className="header">
<h2>Add Order</h2>
<ul className="header-dropdown m-r--5">
<Link to={"/addcustomer"} className="toggled waves-effect waves-block">
<button className="btn btn-primary m-r-15 waves-effect">
Add Customer
</button>
</Link>
</ul>
</div>
<div className="body">
<form onSubmit={this.formSubmit} ref={this.formRef}>
{this.state.customersDetails.map((item, index) => (
<div className="row" key={index}>
<div className="col-lg-6">
<label htmlFor="email_address">
Phone No.{" "}
</label>
<div className="form-group">
<div className="form-line">
<AutoCompleteCustomer
itemPostion={index}
showDataInInputs={this.showDataInInputs}
/>
</div>
</div>
</div>
<div className="col-lg-5">
<label htmlFor="email_address">Customer Name</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="name"
name="name"
className="form-control"
placeholder="Enter Customer Name"
defaultValue={item.name}
/>
</div>
</div>
</div>
<div className="col-sm-1">
<label htmlFor="email_address">No</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="customer_id"
name="customer_id"
className="form-control"
placeholder=""
value={item.customer_id}
/>
</div>
</div>
</div>
</div>
))}
<div className="row">
<div className="col-lg-4">
<label htmlFor="email_address">Town</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="town"
name="town"
className="form-control"
placeholder="Enter Customer Town"
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Region</label>
<div className="form-group">
<div className="form-line">
<select id="region" name="region" className="form-control show-tick">
<option value="1">NAIROBI</option>
<option value="2">NYANZA</option>
<option value="3">CENTRAL</option>
<option value="4">COAST</option>
<option value="5">EASTERN</option>
<option value="6">NORTH EASTERN</option>
<option value="7">WESTERN</option>
<option value="8">RIFT VALLEY</option>
</select>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Kgs : </label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="kgs"
name="kgs"
className="form-control"
placeholder="Enter Quantity."
defaultValue={this.state.kgs}
onChange={this.updateKgs}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Packaging</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="packaging"
name="packaging"
className="form-control"
placeholder="Enter Amount"
defaultValue={this.state.packaging}
onChange={this.updatePackaging}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Discount.</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="discount"
name="discount"
className="form-control"
placeholder="Enter Discount."
defaultValue={this.state.discount}
onChange={this.updateDiscount}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Transport</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="transport"
name="transport"
className="form-control"
placeholder="Enter Transport."
defaultValue={this.state.transport}
onChange={this.updateTransport}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Comment</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="comment"
name="comment"
className="form-control"
placeholder="Enter Comment"
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Farmer Name</label>
<div className="form-group">
<select className="form-control show-tick"
id="farmer_id"
name="farmer_id"
>
{this.state.farmerlist.map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
))}
</select>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Rice Type</label>
<div className="form-group">
<div className="form-line">
<select id="rice_type" name="rice_type" className="form-control show-tick">
<option value="1">Pishori</option>
<option value="2">Komboka</option>
</select>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Price per Kg</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="price"
name="price"
className="form-control"
placeholder="Enter Price"
defaultValue={this.state.price}
onChange={this.updatePrice}
/>
</div>
</div>
</div>
<div className="col-lg-4">
<label htmlFor="email_address">Amount</label>
<div className="form-group">
<div className="form-line">
<input
type="text"
id="amount"
name="amount"
className="form-control"
placeholder="Enter Amount"
defaultValue={this.state.amount}
onClick={this.updateAmount}
/>
</div>
</div>
</div>
</div>
<br />
<button
type="submit"
className="btn btn-success m-t-15 waves-effect "
disabled={this.state.btnMessage === 0 ? false : true}
>
{this.state.btnMessage === 0
? "Add Order"
: "Adding Order Please Wait.."}
</button>
<br />
{this.state.errorRes === false &&
this.state.sendData === true ? (
<div className="alert alert-success">
<strong>Success!</strong> {this.state.errorMessage}.
<Link to="/orders" className="btn btn-info">View Orders</Link>
</div>
) : (
""
)}
{this.state.errorRes === true &&
this.state.sendData === true ? (
<div className="alert alert-danger">
<strong>Failed!</strong>
{this.state.errorMessage}.
</div>
) : (
""
)}
</form>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
}
export default HomeComponent;
Hope this helpful to anyone facing a similar problem..

Failed to load response data : No data found for resource with given identifier

I am making a registration form in react and trying to send a request using the axios API. I'm getting no errors in the code, but when I click the sign up button, then go to the console, then go to the network, I see that it's failing to load the response data.
The error I am getting is:
Failed to load response data : No data found for resource with given identifier
export class Register extends React.Component {
handleSubmit = e => {
e.preventDefault();
const data = {
first_name: this.firstName,
last_name: this.lastName,
email: this.email,
password: this.password,
password_confirm: this.confirmPassword
};
axios.post('http://localhost:8000/Register', data).then(
res => {
console.log(res)
}
).catch(
err => {
console.log(err);
}
)
};
render() {
return (
<form onSubmit={this.handleSubmit} >
<h3>Sign Up</h3>
<div className="form-group">
<label> First Name</label>
<input type="text" className="form-control" placeholder="First Name"
onChange={e => this.firstName = e.target.value} />
</div>
<div className="form-group">
<label> Last Name</label>
<input type="text" className="form-control" placeholder="Last Name"
onChange={e => this.lastName = e.target.value} />
</div>
<div className="form-group">
<label> Email</label>
<input type="email" className="form-control" placeholder="Email"
onChange={e => this.email = e.target.value} />
</div>
<div className="form-group">
<label> Password</label>
<input type="password" className="form-control" placeholder="Password"
onChange={e => this.password = e.target.value} />
</div>`
<div className="form-group">
<label> Confirm Password</label>
<input type="password" className="form-control" placeholder="Confirm Password"
onChange={e => this.confirmPassword = e.target.value} />
</div>`
<button className="btn btn-primary btn-block" > Sign Up</button>
</form >
);
}
}
export default Register;

this.setState and this.state problem for Register page

I have a code for Registration Page. Where I'm trying to send data to database by using this.setState and this.state but everytime I run the code Its showing some error in onSubmit Function about this.state . Why I'm getting this error please tell me. I've a project to submit and I'm stuck on this
import React, {Component} from 'react';
import {register} from './UserFunctions';
class Register extends Component {
constructor() {
super()
this.state = {
first_name: '',
last_name: '',
email: '',
password: ''
};
this.onChange = this.onChange.bind(this)
this.onChange = this.onChange.bind(this)
}
onChange(e){
this.setState({[e.target.name]: e.target.value});
}
onSubmit(e){
e.preventDefault()
const user = {
first_name: this.state.first_name, [error line]
last_name: this.state.last_name,
email: this.state.email,
password: this.state.password
}
register(user).then(res => {
if (res) {
this.props.history.push('/login');
}
})
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-6 mt-5 mx-auto">
<form noValidate onSubmit={this.onSubmit}>
<h1 className="h3 mb-3 font-weight-normal">Please Sign in!</h1>
<div className="form-group">
<label htmlFor="first_name">First Name</label>
<input type="text"
className="form-control"
name="first_name"
placeholder="First Name"
value={this.state.first_name}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<label htmlFor="last_name">Last Name</label>
<input type="text"
className="form-control"
name="last_name"
placeholder="Last Name"
value={this.state.last_name}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<label htmlFor="email">Email Address</label>
<input type="email"
className="form-control"
name="email"
placeholder="Enter Email"
value={this.state.email}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password"
className="form-control"
name="password"
placeholder="Enter Password"
value={this.state.password}
onChange={this.onChange}
/>
</div>
<button type="submit"
className="btn btn-lg btn-primary btn-block">
Register
</button>
</form>
</div>
</div>
</div>
)
}
}
export default Register
Please tell me what should I do to solve this problem.

You have to bind it like you did with onChange
this.onSubmit = this.onSubmit.bind(this)
You forgot to do it probably, when copying onChange.

Error while updating the content

Why am i getting an error while trying for updating the content? I am getting the edited value in componentDidMount function. There is no problem while posting the content but when i try for updating the content using reactjs and django tastypie api , i get an error as
"{"error_message": "The format indicated 'application/x-www-form-urlencoded' had no available deserialization method.
my code
export default class RoomDetail extends Component{
constructor(props){
super(props);
this.state = { rooms:[], isEditing:false };
this.onEditClick = this.onEditClick.bind(this);
this.onCancelClick = this.onCancelClick.bind(this);
this.onSaveClick = this.onSaveClick.bind(this);
}
onEditClick(event){
event.preventDefault();
this.setState({ isEditing: true });
}
onCancelClick(){
this.setState({ isEditing: false });
}
onSaveClick(event){
event.preventDefault();
console.log('edited property type is', this.refs.property.value);
const newUser = [
{
listingName: this.refs.editlistingName.value,
summary: this.refs.editSummary.value,
ownerName: this.refs.editOwnerName.value,
email: this.refs.editEmail.value,
phoneNumber:this.refs.editphoneNumber.value,
room:this.refs.rooms.value,
city:this.refs.editCity.value,
place:this.refs.editPlace.value,
property:this.refs.property.value,
price:this.refs.editPrice.value,
}
];
this.updateRoomToServer(...newUser);
}
updateRoomToServer(newUser){
console.log('newuser from updateRoomToServer', newUser);
this.componentDidMount(newUser);
}
componentDidMount(newUser){
console.log('component updated with new user are', newUser);
$.ajax({
url:'/api/v1/rental/'+this.props.data.slug+'/',
type:'put',
dataType:'json',
data:newUser,
success: (data) => {
console.log('data',data);
},
error: (xhr, status, err) => {
console.error(xhr, status, err.toString());
}
});
}
componentWillMount(){
console.log('componentDidMount');
console.log(this.props.data.slug);
this.loadRoomFromServer();
}
loadRoomFromServer(){
$.ajax({
url:'/api/v1/rental/'+this.props.data.slug,
dataType:'json',
success: (data) => {
console.log('data',data);
this.setState({rooms: data});
},
error: (xhr, status, err) => {
console.error(xhr, status, err.toString());
}
});
}
renderRoomDetailSection(){
let imageFile;
let firstImage;
if(this.state.rooms.gallery){
firstImage = this.state.rooms.gallery[0].image;
console.log('firstImage', firstImage);
imageFile = this.state.rooms.gallery.map((image) => {
return(
<div className="col-md-3">
<img src={image.image} key={image.id} className="img-fluid img-rounded" />
</div>
);
});
}
if (this.state.isEditing ){
return(
<div className="container">
<div className="row">
<div className="col-md-6 col-md-offset-3">
<form onSubmit = { this.onSaveClick } >
<fieldset className="form-group">
<label htmlFor="listingName">listing Name</label>
<input type="text" className="form-control" id="listingName" defaultValue = {this.state.rooms.listingName} placeholder="name of your listing" ref="editlistingName" />
</fieldset>
<fieldset className="form-group">
<label htmlFor="summary">summary</label>
<input type="text" className="form-control" id="summary" defaultValue = {this.state.rooms.summary} placeholder="enter summary" ref="editSummary" />
</fieldset>
<fieldset className="form-group">
<label htmlFor="ownerName">owner Name</label>
<input type="text" className="form-control" id="ownerName" defaultValue = {this.state.rooms.ownerName} placeholder="name of owner" ref="editOwnerName" />
</fieldset>
<fieldset className="form-group">
<label htmlFor="email">Email</label>
<input type="text" className="form-control" id="email" defaultValue = {this.state.rooms.email} placeholder="enter email" ref="editEmail" />
</fieldset>
<fieldset className="form-group">
<label htmlFor="contact">phoneNumber</label>
<input type="text" className="form-control" id="phoneNumber" defaultValue = {this.state.rooms.phoneNumber} placeholder="enter phoneNumber" ref="editphoneNumber" />
</fieldset>
<fieldset className="form-group">
<label htmlFor="contact">Property Type</label>
<select className="form-control" defaultValue={this.state.rooms.property} name="Property Type" ref="property">
<option value="appartment">Appartment</option>
<option value="house">House</option>
<option value="shop">Shop</option>
</select>
</fieldset>
<fieldset className="form-group">
<label htmlFor="contact">Room</label>
<select className = "form-control" defaultValue={this.state.rooms.room} name="Rooms" ref="rooms">
<option value="1">1 room</option>
<option value="2">2 rooms</option>
<option value="3">3 rooms</option>
<option value="4">4 rooms</option>
<option value="5">5+ rooms</option>
</select>
</fieldset>
<fieldset className="form-group">
<label htmlFor="price">Price</label>
<input type="text" className="form-control" id="price" defaultValue = {this.state.rooms.price} placeholder="enter price" ref="editPrice" />
</fieldset>
<fieldset className="form-group">
<label htmlFor="city">City</label>
<input type="text" className="form-control" id="city" defaultValue = {this.state.rooms.city} placeholder="enter city" ref="editCity" />
</fieldset>
<fieldset className="form-group">
<label htmlFor="place">Price</label>
<input type="text" className="form-control" id="place" defaultValue = {this.state.rooms.place} placeholder="enter place" ref="editPlace" />
</fieldset>
</form>
</div>
</div>
</div>
)
}
return(
<div className="detailListing">
<div className="container-fluid">
<div className="row">
<div className="col-sm-12">
<div className="lanscapeImage">
<img src={firstImage} className="img-fluid" height="400px" />
</div>
</div>
</div>
</div>
<div className="container descriptionContainer">
<div className="row">
<div className = "aboutListing line">
<div className="col-md-10 listingNameSummary">
<h3>About your listing {this.state.rooms.listingName}</h3>
<p>{this.state.rooms.summary}</p>
</div>
</div>
<div className="rentInformation line">
<div className="col-md-3">
<h3>Rent Information</h3>
</div>
<div className="col-md-9">
<p>Property Type: {this.state.rooms.property}</p>
<p>Number of rooms/spaces: {this.state.rooms.room} room</p>
<p>Price of rooms/spaces: {this.state.rooms.price} Rs/Month </p>
<p>Water Facilities: {this.state.rooms.water} </p>
<p>Amenities: {this.state.rooms.amenities} </p>
<hr />
</div>
</div>
<div className="location line">
<div className="col-md-3">
<h3>Location</h3>
</div>
<div className="col-md-9">
<p>City: {this.state.rooms.city}</p>
<p>Place: {this.state.rooms.place} </p>
<hr />
</div>
</div>
<div className="gallery line">
<div className="col-md-3">
<h3>Gallery</h3>
</div>
<div className="col-md-9">
{imageFile}
</div>
</div>
</div>
</div>
</div>
)
}
renderUserAction(){
if ( this.state.isEditing ){
return(
<div className = "buttons">
<button className="btn btn-warning text-xs-left" onClick = { this.onSaveClick } >Save</button>
<button className="btn btn-danger text-xs-right" onClick = { this.onCancelClick } >Cancel</button>
</div>
);
}
return(
<div className = "buttons">
<button className="btn btn-warning" onClick = { this.onEditClick }>Edit</button>
</div>
);
}
render() {
return (
<div className = "newRoomDetail" >
{ this.renderRoomDetailSection() }
{ this.renderUserAction() }
</div>
);
}
}
api.py
class RentalResource(MultipartResource,ModelResource):
gallery = fields.ToManyField('rentals.api.api.GalleryResource', 'gallery', related_name='rental',full=True)
class Meta:
queryset = Rental.objects.all()
resource_name = 'rental'
detail_uri_name = 'slug'
allowed_methods = ['get', 'post', 'put']
fields = ['listingName','slug','property','city','place','ownerName','room','water','amenities','price','summary','phoneNumber','email']
filtering = { "property" : ALL , "city":ALL, "place":('exact', 'startswith',), "room":ALL,"price":ALL,"listingName":ALL,"slug":ALL}
authorization = DjangoAuthorization()

You should try changing your AJAX call this way:
$.ajax({
url:'/api/v1/rental/'+this.props.data.slug+'/',
type:'put',
contentType: "application/json",
data:JSON.stringify(newUser),
success: (data) => {
console.log('data',data);
},
error: (xhr, status, err) => {
console.error(xhr, status, err.toString());
}
});
Your backend might be able to deserialize the data this way, as application/x-www-form-urlencoded does not seem to work.

Develop Reference

JavaScript is the programming language of the Web.

_this.showModal is not a function because of ref in reactjs - javascript

Related

How can i pull form values to another page

Doing real-time calculations in a form in react js components

Failed to load response data : No data found for resource with given identifier

this.setState and this.state problem for Register page

Error while updating the content

Categories

Resources