getDerivedStateFromProps no showing any changes on my formJavaScript post request like a form submitHow to change the href for a hyperlink using jQueryHow to change an element's class with JavaScript?Convert form data to JavaScript object with jQueryjQuery AJAX submit formPlay Framework: cannot read value of textfield with javascriptUnable to Grab value from Textfield in React?KeyPress to detect 'Enter' blocks any data entry on an Input text fieldHow to grab Textfield input values with Redux-form using MaterialUIAvoid showing error messages while getting the value from TForm.getValue()
Does the "6 seconds per round" rule apply to speaking/roleplaying during combat situations?
Incremental Ranges!
Completing the square to find if quadratic form is positive definite.
Did Darth Vader wear the same suit for 20+ years?
How bad would a partial hash leak be, realistically?
Bug using breqn and babel
Did thousands of women die every year due to illegal abortions before Roe v. Wade?
After the loss of Challenger, why weren’t Galileo and Ulysses launched by Centaurs on expendable boosters?
How do photons get into the eyes?
Company did not petition for visa in a timely manner. Is asking me to work from overseas, but wants me to take a paycut
What risks are there when you clear your cookies instead of logging off?
How can drunken, homicidal elves successfully conduct a wild hunt?
How to supress loops in a digraph?
Why did Hela need Heimdal's sword?
Why is quantum entanglement surprising?
Does an ice chest packed full of frozen food need ice? 18 day Grand Canyon trip
What is the purpose of building foundations?
What's the correct term for a waitress in the Middle Ages?
Avoiding cliches when writing gods
Word for a small burst of laughter that can't be held back
How to make thick Asian sauces?
Implement Homestuck's Catenative Doomsday Dice Cascader
Efficiently merge lists chronologically without duplicates?
Java guess the number
getDerivedStateFromProps no showing any changes on my form
JavaScript post request like a form submitHow to change the href for a hyperlink using jQueryHow to change an element's class with JavaScript?Convert form data to JavaScript object with jQueryjQuery AJAX submit formPlay Framework: cannot read value of textfield with javascriptUnable to Grab value from Textfield in React?KeyPress to detect 'Enter' blocks any data entry on an Input text fieldHow to grab Textfield input values with Redux-form using MaterialUIAvoid showing error messages while getting the value from TForm.getValue()
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
Hey guys I am having issues with editing my populated Edit Agent Form. I am using the getDerivedStateFromProps() life cycle method but each time I try to edit the after it has been fully populated I get this error: Uncaught TypeError: Cannot read property 'setState' of undefined. I have gone through the react documentation severally but no solution with all the methods I have used so far. Please How do I resolve this?
import React, Component from 'react'
import connect from 'react-redux';
import PropTypes from 'prop-types';
import TextField from '../../commons/TextField.jsx';
import SubmitButton from '../../commons/SubmitButton.jsx';
import fetchSingleAgent from '../../../actions/getSingleAgentAction';
import updateAgentInput from '../../../middleware/updateAgentInput';
class EditAgentForm extends Component
constructor(props)
super(props);
this.state =
id: this.props.singleAgent ? this.props.singleAgent._id: '',
phoneNumber: this.props.singleAgent ? this.props.singleAgent.phoneNumber: '',
password: this.props.singleAgent ? this.props.singleAgent.password: '',
fullname: this.props.singleAgent ? this.props.singleAgent.fullname: '',
address: this.props.singleAgent ? this.props.singleAgent.address: '',
bvn: this.props.singleAgent ? this.props.singleAgent.bvn: '',
email: this.props.singleAgent ? this.props.singleAgent.email: '',
age: this.props.singleAgent ? this.props.singleAgent.age: '',
meansOfId: this.props.singleAgent ? this.props.singleAgent.meansOfId: 'sample',
guarantorsFullName: this.props.singleAgent ? this.props.singleAgent.guarantorsFullName: '',
guarantorsPhonenumber: this.props.singleAgent ? this.props.singleAgent.guarantorsPhonenumber: '',
guarantorsAddress: this.props.singleAgent ? this.props.singleAgent.guarantorsAddress: '',
idNumber: this.props.singleAgent ? this.props.singleAgent.idNumber: '',
errors: ,
isLoading: false,
this.onEditAgent = this.onEditAgent.bind(this);
/**
*
* @param * nextProps
* @returns * - single master agent object
*/
static getDerivedStateFromProps(props, state)
console.log('===>', props.singleAgent._id, state.id);
if (props.singleAgent._id == state.id)
return null
return
id: props.singleAgent._id,
phoneNumber: props.singleAgent.phoneNumber,
password: props.singleAgent.password,
fullname: props.singleAgent.fullname,
address: props.singleAgent.address,
bvn: props.singleAgent.bvn,
email: props.singleAgent.email,
age: props.singleAgent.age,
meansOfId: props.singleAgent.meansOfId,
guarantorsFullName: props.singleAgent.guarantorsFullName,
guarantorsPhonenumber: props.singleAgent.guarantorsPhonenumber,
guarantorsAddress: props.singleAgent.guarantorsAddress,
isNumber: props.singleAgent.isNumber,
;
/**
*
* @param * event
* @returns * - state
*/
onChange(event)
this.setState(
[event.target.name]: event.target.value
);
/**
*
* @param * event
* @returns * - state
*/
onSubmit(event)
event.preventDefault();
console.log('I got here 2')
if (this.isValid())
console.log('I got here')
this.setState( errors: , isLoading: true );
onEditAgent(event)
event.preventDefault();
this.setState(isLoading: true)
isValid()
console.log('I got here 3')
const errors, isValid = updateAgentInput(this.state);
if (!isValid)
this.setState( errors );
return isValid;
render()
const
phoneNumber,
password,
fullname,
address,
bvn,
email,
age,
meansOfId,
guarantorsFullName,
guarantorsPhonenumber,
guarantorsAddress,
idNumber,
errors,
isLoading,
= this.state;
const meansOfIdentificationList = ['Select', 'voters card','international passport','national id card','drivers license']
const editAgentForm = (
<div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Update Agents Form</h3>
</div>
<div class="panel-body">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label>Fullname</label>
<TextField
error=errors.fullname
onChange=this.onChange
value= ''
field="fullname"
type="text"
className="myfullname"
placeholder="Enter Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Phone Number</label>
<TextField
error=errors.phoneNumber
onChange=this.onChange
value=
field="phoneNumber"
type="text"
className="form-control"
placeholder="Enter Phone Number"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Email</label>
<TextField
error=errors.email
onChange=this.onChange
value= ''
field="email"
type="email"
className="myemail"
placeholder="Enter Email"
/>
</div>
<div class="form-group col-md-4">
<label>Address</label>
<TextField
error=errors.address
onChange=this.onChange
value= ''
field="address"
type="text"
className="myaddress"
placeholder="Enter Your Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Age</label>
<TextField
error=errors.age
onChange=this.onChange
value= ''
field="age"
type="text"
className="myage"
placeholder="Enter Age"
/>
</div>
<div class="form-group col-md-4">
<label>BVN</label>
<TextField
error=errors.bvn
onChange=this.onChange
value= ''
field="bvn"
type="password"
className="mybvn"
placeholder="Enter your BVN"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Password</label>
<TextField
error=errors.password
onChange=this.onChange
value= ''
field="password"
type="text"
className="mypassword"
placeholder="Enter Your Password"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Address</label>
<TextField
error=errors.guarantorsAddress
onChange=this.onChange
value=guarantorsAddress
field="guarantorsAddress"
type="text"
className="myguarantorAddress"
placeholder="Enter Guarantor Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Guarantor Fullname</label>
<TextField
error=errors.guarantorsFullName
onChange=this.onChange
value=guarantorsFullName
field="guarantorsFullName"
type="text"
className="myguarantorFullname"
placeholder="Enter Guarantor Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Phone Number</label>
<TextField
error=errors.guarantorsPhonenumber
onChange=this.onChange
value=guarantorsPhonenumber
field="guarantorsPhonenumber"
type="text"
className="myguarantorPhonenumber"
placeholder="Enter Guarantor Phonenumber"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Identification Number</label>
<TextField
error=errors.idNumber
onChange=this.onChange
value=idNumber
field="idNumber"
type="text"
className="myidNumber"
placeholder="Enter Identification Number"
/>
</div>
<div class="form-group col-md-4">
<label htmlFor="email">Select Means of Identification </label>
<select
className="form-control select2"
onChange=this.onChange
name="meansOfId"
value=meansOfId
>
meansOfIdentificationList.map(idMeans => (
<option value=idMeans>
idMeans
</option>
))
</select>
</div>
</div>
</form>
<br />
</div>
<div class="form-group text-center">
<SubmitButton
type="submit"
className="mybutton"
onClick=this.onSubmit
label="Update Agent"
/>
</div>
</div>
</div>
</div>
)
return <div>editAgentForm</div>
EditAgentForm.propTypes =
singleAgent: PropTypes.shape().isRequired,
;
const mapStateToProps = state =>
return
singleAgent: state.singleAgentRequests.singleAgent
;
;
export default connect(mapStateToProps, fetchSingleAgent )(EditAgentForm);
"I expected the populated form output to change but each time I try to edit it I get this error: Uncaught TypeError: Cannot read property 'setState' of undefined."
javascript reactjs redux
add a comment |
Hey guys I am having issues with editing my populated Edit Agent Form. I am using the getDerivedStateFromProps() life cycle method but each time I try to edit the after it has been fully populated I get this error: Uncaught TypeError: Cannot read property 'setState' of undefined. I have gone through the react documentation severally but no solution with all the methods I have used so far. Please How do I resolve this?
import React, Component from 'react'
import connect from 'react-redux';
import PropTypes from 'prop-types';
import TextField from '../../commons/TextField.jsx';
import SubmitButton from '../../commons/SubmitButton.jsx';
import fetchSingleAgent from '../../../actions/getSingleAgentAction';
import updateAgentInput from '../../../middleware/updateAgentInput';
class EditAgentForm extends Component
constructor(props)
super(props);
this.state =
id: this.props.singleAgent ? this.props.singleAgent._id: '',
phoneNumber: this.props.singleAgent ? this.props.singleAgent.phoneNumber: '',
password: this.props.singleAgent ? this.props.singleAgent.password: '',
fullname: this.props.singleAgent ? this.props.singleAgent.fullname: '',
address: this.props.singleAgent ? this.props.singleAgent.address: '',
bvn: this.props.singleAgent ? this.props.singleAgent.bvn: '',
email: this.props.singleAgent ? this.props.singleAgent.email: '',
age: this.props.singleAgent ? this.props.singleAgent.age: '',
meansOfId: this.props.singleAgent ? this.props.singleAgent.meansOfId: 'sample',
guarantorsFullName: this.props.singleAgent ? this.props.singleAgent.guarantorsFullName: '',
guarantorsPhonenumber: this.props.singleAgent ? this.props.singleAgent.guarantorsPhonenumber: '',
guarantorsAddress: this.props.singleAgent ? this.props.singleAgent.guarantorsAddress: '',
idNumber: this.props.singleAgent ? this.props.singleAgent.idNumber: '',
errors: ,
isLoading: false,
this.onEditAgent = this.onEditAgent.bind(this);
/**
*
* @param * nextProps
* @returns * - single master agent object
*/
static getDerivedStateFromProps(props, state)
console.log('===>', props.singleAgent._id, state.id);
if (props.singleAgent._id == state.id)
return null
return
id: props.singleAgent._id,
phoneNumber: props.singleAgent.phoneNumber,
password: props.singleAgent.password,
fullname: props.singleAgent.fullname,
address: props.singleAgent.address,
bvn: props.singleAgent.bvn,
email: props.singleAgent.email,
age: props.singleAgent.age,
meansOfId: props.singleAgent.meansOfId,
guarantorsFullName: props.singleAgent.guarantorsFullName,
guarantorsPhonenumber: props.singleAgent.guarantorsPhonenumber,
guarantorsAddress: props.singleAgent.guarantorsAddress,
isNumber: props.singleAgent.isNumber,
;
/**
*
* @param * event
* @returns * - state
*/
onChange(event)
this.setState(
[event.target.name]: event.target.value
);
/**
*
* @param * event
* @returns * - state
*/
onSubmit(event)
event.preventDefault();
console.log('I got here 2')
if (this.isValid())
console.log('I got here')
this.setState( errors: , isLoading: true );
onEditAgent(event)
event.preventDefault();
this.setState(isLoading: true)
isValid()
console.log('I got here 3')
const errors, isValid = updateAgentInput(this.state);
if (!isValid)
this.setState( errors );
return isValid;
render()
const
phoneNumber,
password,
fullname,
address,
bvn,
email,
age,
meansOfId,
guarantorsFullName,
guarantorsPhonenumber,
guarantorsAddress,
idNumber,
errors,
isLoading,
= this.state;
const meansOfIdentificationList = ['Select', 'voters card','international passport','national id card','drivers license']
const editAgentForm = (
<div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Update Agents Form</h3>
</div>
<div class="panel-body">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label>Fullname</label>
<TextField
error=errors.fullname
onChange=this.onChange
value= ''
field="fullname"
type="text"
className="myfullname"
placeholder="Enter Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Phone Number</label>
<TextField
error=errors.phoneNumber
onChange=this.onChange
value=
field="phoneNumber"
type="text"
className="form-control"
placeholder="Enter Phone Number"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Email</label>
<TextField
error=errors.email
onChange=this.onChange
value= ''
field="email"
type="email"
className="myemail"
placeholder="Enter Email"
/>
</div>
<div class="form-group col-md-4">
<label>Address</label>
<TextField
error=errors.address
onChange=this.onChange
value= ''
field="address"
type="text"
className="myaddress"
placeholder="Enter Your Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Age</label>
<TextField
error=errors.age
onChange=this.onChange
value= ''
field="age"
type="text"
className="myage"
placeholder="Enter Age"
/>
</div>
<div class="form-group col-md-4">
<label>BVN</label>
<TextField
error=errors.bvn
onChange=this.onChange
value= ''
field="bvn"
type="password"
className="mybvn"
placeholder="Enter your BVN"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Password</label>
<TextField
error=errors.password
onChange=this.onChange
value= ''
field="password"
type="text"
className="mypassword"
placeholder="Enter Your Password"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Address</label>
<TextField
error=errors.guarantorsAddress
onChange=this.onChange
value=guarantorsAddress
field="guarantorsAddress"
type="text"
className="myguarantorAddress"
placeholder="Enter Guarantor Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Guarantor Fullname</label>
<TextField
error=errors.guarantorsFullName
onChange=this.onChange
value=guarantorsFullName
field="guarantorsFullName"
type="text"
className="myguarantorFullname"
placeholder="Enter Guarantor Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Phone Number</label>
<TextField
error=errors.guarantorsPhonenumber
onChange=this.onChange
value=guarantorsPhonenumber
field="guarantorsPhonenumber"
type="text"
className="myguarantorPhonenumber"
placeholder="Enter Guarantor Phonenumber"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Identification Number</label>
<TextField
error=errors.idNumber
onChange=this.onChange
value=idNumber
field="idNumber"
type="text"
className="myidNumber"
placeholder="Enter Identification Number"
/>
</div>
<div class="form-group col-md-4">
<label htmlFor="email">Select Means of Identification </label>
<select
className="form-control select2"
onChange=this.onChange
name="meansOfId"
value=meansOfId
>
meansOfIdentificationList.map(idMeans => (
<option value=idMeans>
idMeans
</option>
))
</select>
</div>
</div>
</form>
<br />
</div>
<div class="form-group text-center">
<SubmitButton
type="submit"
className="mybutton"
onClick=this.onSubmit
label="Update Agent"
/>
</div>
</div>
</div>
</div>
)
return <div>editAgentForm</div>
EditAgentForm.propTypes =
singleAgent: PropTypes.shape().isRequired,
;
const mapStateToProps = state =>
return
singleAgent: state.singleAgentRequests.singleAgent
;
;
export default connect(mapStateToProps, fetchSingleAgent )(EditAgentForm);
"I expected the populated form output to change but each time I try to edit it I get this error: Uncaught TypeError: Cannot read property 'setState' of undefined."
javascript reactjs redux
add a comment |
Hey guys I am having issues with editing my populated Edit Agent Form. I am using the getDerivedStateFromProps() life cycle method but each time I try to edit the after it has been fully populated I get this error: Uncaught TypeError: Cannot read property 'setState' of undefined. I have gone through the react documentation severally but no solution with all the methods I have used so far. Please How do I resolve this?
import React, Component from 'react'
import connect from 'react-redux';
import PropTypes from 'prop-types';
import TextField from '../../commons/TextField.jsx';
import SubmitButton from '../../commons/SubmitButton.jsx';
import fetchSingleAgent from '../../../actions/getSingleAgentAction';
import updateAgentInput from '../../../middleware/updateAgentInput';
class EditAgentForm extends Component
constructor(props)
super(props);
this.state =
id: this.props.singleAgent ? this.props.singleAgent._id: '',
phoneNumber: this.props.singleAgent ? this.props.singleAgent.phoneNumber: '',
password: this.props.singleAgent ? this.props.singleAgent.password: '',
fullname: this.props.singleAgent ? this.props.singleAgent.fullname: '',
address: this.props.singleAgent ? this.props.singleAgent.address: '',
bvn: this.props.singleAgent ? this.props.singleAgent.bvn: '',
email: this.props.singleAgent ? this.props.singleAgent.email: '',
age: this.props.singleAgent ? this.props.singleAgent.age: '',
meansOfId: this.props.singleAgent ? this.props.singleAgent.meansOfId: 'sample',
guarantorsFullName: this.props.singleAgent ? this.props.singleAgent.guarantorsFullName: '',
guarantorsPhonenumber: this.props.singleAgent ? this.props.singleAgent.guarantorsPhonenumber: '',
guarantorsAddress: this.props.singleAgent ? this.props.singleAgent.guarantorsAddress: '',
idNumber: this.props.singleAgent ? this.props.singleAgent.idNumber: '',
errors: ,
isLoading: false,
this.onEditAgent = this.onEditAgent.bind(this);
/**
*
* @param * nextProps
* @returns * - single master agent object
*/
static getDerivedStateFromProps(props, state)
console.log('===>', props.singleAgent._id, state.id);
if (props.singleAgent._id == state.id)
return null
return
id: props.singleAgent._id,
phoneNumber: props.singleAgent.phoneNumber,
password: props.singleAgent.password,
fullname: props.singleAgent.fullname,
address: props.singleAgent.address,
bvn: props.singleAgent.bvn,
email: props.singleAgent.email,
age: props.singleAgent.age,
meansOfId: props.singleAgent.meansOfId,
guarantorsFullName: props.singleAgent.guarantorsFullName,
guarantorsPhonenumber: props.singleAgent.guarantorsPhonenumber,
guarantorsAddress: props.singleAgent.guarantorsAddress,
isNumber: props.singleAgent.isNumber,
;
/**
*
* @param * event
* @returns * - state
*/
onChange(event)
this.setState(
[event.target.name]: event.target.value
);
/**
*
* @param * event
* @returns * - state
*/
onSubmit(event)
event.preventDefault();
console.log('I got here 2')
if (this.isValid())
console.log('I got here')
this.setState( errors: , isLoading: true );
onEditAgent(event)
event.preventDefault();
this.setState(isLoading: true)
isValid()
console.log('I got here 3')
const errors, isValid = updateAgentInput(this.state);
if (!isValid)
this.setState( errors );
return isValid;
render()
const
phoneNumber,
password,
fullname,
address,
bvn,
email,
age,
meansOfId,
guarantorsFullName,
guarantorsPhonenumber,
guarantorsAddress,
idNumber,
errors,
isLoading,
= this.state;
const meansOfIdentificationList = ['Select', 'voters card','international passport','national id card','drivers license']
const editAgentForm = (
<div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Update Agents Form</h3>
</div>
<div class="panel-body">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label>Fullname</label>
<TextField
error=errors.fullname
onChange=this.onChange
value= ''
field="fullname"
type="text"
className="myfullname"
placeholder="Enter Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Phone Number</label>
<TextField
error=errors.phoneNumber
onChange=this.onChange
value=
field="phoneNumber"
type="text"
className="form-control"
placeholder="Enter Phone Number"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Email</label>
<TextField
error=errors.email
onChange=this.onChange
value= ''
field="email"
type="email"
className="myemail"
placeholder="Enter Email"
/>
</div>
<div class="form-group col-md-4">
<label>Address</label>
<TextField
error=errors.address
onChange=this.onChange
value= ''
field="address"
type="text"
className="myaddress"
placeholder="Enter Your Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Age</label>
<TextField
error=errors.age
onChange=this.onChange
value= ''
field="age"
type="text"
className="myage"
placeholder="Enter Age"
/>
</div>
<div class="form-group col-md-4">
<label>BVN</label>
<TextField
error=errors.bvn
onChange=this.onChange
value= ''
field="bvn"
type="password"
className="mybvn"
placeholder="Enter your BVN"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Password</label>
<TextField
error=errors.password
onChange=this.onChange
value= ''
field="password"
type="text"
className="mypassword"
placeholder="Enter Your Password"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Address</label>
<TextField
error=errors.guarantorsAddress
onChange=this.onChange
value=guarantorsAddress
field="guarantorsAddress"
type="text"
className="myguarantorAddress"
placeholder="Enter Guarantor Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Guarantor Fullname</label>
<TextField
error=errors.guarantorsFullName
onChange=this.onChange
value=guarantorsFullName
field="guarantorsFullName"
type="text"
className="myguarantorFullname"
placeholder="Enter Guarantor Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Phone Number</label>
<TextField
error=errors.guarantorsPhonenumber
onChange=this.onChange
value=guarantorsPhonenumber
field="guarantorsPhonenumber"
type="text"
className="myguarantorPhonenumber"
placeholder="Enter Guarantor Phonenumber"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Identification Number</label>
<TextField
error=errors.idNumber
onChange=this.onChange
value=idNumber
field="idNumber"
type="text"
className="myidNumber"
placeholder="Enter Identification Number"
/>
</div>
<div class="form-group col-md-4">
<label htmlFor="email">Select Means of Identification </label>
<select
className="form-control select2"
onChange=this.onChange
name="meansOfId"
value=meansOfId
>
meansOfIdentificationList.map(idMeans => (
<option value=idMeans>
idMeans
</option>
))
</select>
</div>
</div>
</form>
<br />
</div>
<div class="form-group text-center">
<SubmitButton
type="submit"
className="mybutton"
onClick=this.onSubmit
label="Update Agent"
/>
</div>
</div>
</div>
</div>
)
return <div>editAgentForm</div>
EditAgentForm.propTypes =
singleAgent: PropTypes.shape().isRequired,
;
const mapStateToProps = state =>
return
singleAgent: state.singleAgentRequests.singleAgent
;
;
export default connect(mapStateToProps, fetchSingleAgent )(EditAgentForm);
"I expected the populated form output to change but each time I try to edit it I get this error: Uncaught TypeError: Cannot read property 'setState' of undefined."
javascript reactjs redux
Hey guys I am having issues with editing my populated Edit Agent Form. I am using the getDerivedStateFromProps() life cycle method but each time I try to edit the after it has been fully populated I get this error: Uncaught TypeError: Cannot read property 'setState' of undefined. I have gone through the react documentation severally but no solution with all the methods I have used so far. Please How do I resolve this?
import React, Component from 'react'
import connect from 'react-redux';
import PropTypes from 'prop-types';
import TextField from '../../commons/TextField.jsx';
import SubmitButton from '../../commons/SubmitButton.jsx';
import fetchSingleAgent from '../../../actions/getSingleAgentAction';
import updateAgentInput from '../../../middleware/updateAgentInput';
class EditAgentForm extends Component
constructor(props)
super(props);
this.state =
id: this.props.singleAgent ? this.props.singleAgent._id: '',
phoneNumber: this.props.singleAgent ? this.props.singleAgent.phoneNumber: '',
password: this.props.singleAgent ? this.props.singleAgent.password: '',
fullname: this.props.singleAgent ? this.props.singleAgent.fullname: '',
address: this.props.singleAgent ? this.props.singleAgent.address: '',
bvn: this.props.singleAgent ? this.props.singleAgent.bvn: '',
email: this.props.singleAgent ? this.props.singleAgent.email: '',
age: this.props.singleAgent ? this.props.singleAgent.age: '',
meansOfId: this.props.singleAgent ? this.props.singleAgent.meansOfId: 'sample',
guarantorsFullName: this.props.singleAgent ? this.props.singleAgent.guarantorsFullName: '',
guarantorsPhonenumber: this.props.singleAgent ? this.props.singleAgent.guarantorsPhonenumber: '',
guarantorsAddress: this.props.singleAgent ? this.props.singleAgent.guarantorsAddress: '',
idNumber: this.props.singleAgent ? this.props.singleAgent.idNumber: '',
errors: ,
isLoading: false,
this.onEditAgent = this.onEditAgent.bind(this);
/**
*
* @param * nextProps
* @returns * - single master agent object
*/
static getDerivedStateFromProps(props, state)
console.log('===>', props.singleAgent._id, state.id);
if (props.singleAgent._id == state.id)
return null
return
id: props.singleAgent._id,
phoneNumber: props.singleAgent.phoneNumber,
password: props.singleAgent.password,
fullname: props.singleAgent.fullname,
address: props.singleAgent.address,
bvn: props.singleAgent.bvn,
email: props.singleAgent.email,
age: props.singleAgent.age,
meansOfId: props.singleAgent.meansOfId,
guarantorsFullName: props.singleAgent.guarantorsFullName,
guarantorsPhonenumber: props.singleAgent.guarantorsPhonenumber,
guarantorsAddress: props.singleAgent.guarantorsAddress,
isNumber: props.singleAgent.isNumber,
;
/**
*
* @param * event
* @returns * - state
*/
onChange(event)
this.setState(
[event.target.name]: event.target.value
);
/**
*
* @param * event
* @returns * - state
*/
onSubmit(event)
event.preventDefault();
console.log('I got here 2')
if (this.isValid())
console.log('I got here')
this.setState( errors: , isLoading: true );
onEditAgent(event)
event.preventDefault();
this.setState(isLoading: true)
isValid()
console.log('I got here 3')
const errors, isValid = updateAgentInput(this.state);
if (!isValid)
this.setState( errors );
return isValid;
render()
const
phoneNumber,
password,
fullname,
address,
bvn,
email,
age,
meansOfId,
guarantorsFullName,
guarantorsPhonenumber,
guarantorsAddress,
idNumber,
errors,
isLoading,
= this.state;
const meansOfIdentificationList = ['Select', 'voters card','international passport','national id card','drivers license']
const editAgentForm = (
<div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading main-color-bg">
<h3 class="panel-title">Update Agents Form</h3>
</div>
<div class="panel-body">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label>Fullname</label>
<TextField
error=errors.fullname
onChange=this.onChange
value= ''
field="fullname"
type="text"
className="myfullname"
placeholder="Enter Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Phone Number</label>
<TextField
error=errors.phoneNumber
onChange=this.onChange
value=
field="phoneNumber"
type="text"
className="form-control"
placeholder="Enter Phone Number"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Email</label>
<TextField
error=errors.email
onChange=this.onChange
value= ''
field="email"
type="email"
className="myemail"
placeholder="Enter Email"
/>
</div>
<div class="form-group col-md-4">
<label>Address</label>
<TextField
error=errors.address
onChange=this.onChange
value= ''
field="address"
type="text"
className="myaddress"
placeholder="Enter Your Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Age</label>
<TextField
error=errors.age
onChange=this.onChange
value= ''
field="age"
type="text"
className="myage"
placeholder="Enter Age"
/>
</div>
<div class="form-group col-md-4">
<label>BVN</label>
<TextField
error=errors.bvn
onChange=this.onChange
value= ''
field="bvn"
type="password"
className="mybvn"
placeholder="Enter your BVN"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Password</label>
<TextField
error=errors.password
onChange=this.onChange
value= ''
field="password"
type="text"
className="mypassword"
placeholder="Enter Your Password"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Address</label>
<TextField
error=errors.guarantorsAddress
onChange=this.onChange
value=guarantorsAddress
field="guarantorsAddress"
type="text"
className="myguarantorAddress"
placeholder="Enter Guarantor Address"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Guarantor Fullname</label>
<TextField
error=errors.guarantorsFullName
onChange=this.onChange
value=guarantorsFullName
field="guarantorsFullName"
type="text"
className="myguarantorFullname"
placeholder="Enter Guarantor Fullname"
/>
</div>
<div class="form-group col-md-4">
<label>Guarantor Phone Number</label>
<TextField
error=errors.guarantorsPhonenumber
onChange=this.onChange
value=guarantorsPhonenumber
field="guarantorsPhonenumber"
type="text"
className="myguarantorPhonenumber"
placeholder="Enter Guarantor Phonenumber"
/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Identification Number</label>
<TextField
error=errors.idNumber
onChange=this.onChange
value=idNumber
field="idNumber"
type="text"
className="myidNumber"
placeholder="Enter Identification Number"
/>
</div>
<div class="form-group col-md-4">
<label htmlFor="email">Select Means of Identification </label>
<select
className="form-control select2"
onChange=this.onChange
name="meansOfId"
value=meansOfId
>
meansOfIdentificationList.map(idMeans => (
<option value=idMeans>
idMeans
</option>
))
</select>
</div>
</div>
</form>
<br />
</div>
<div class="form-group text-center">
<SubmitButton
type="submit"
className="mybutton"
onClick=this.onSubmit
label="Update Agent"
/>
</div>
</div>
</div>
</div>
)
return <div>editAgentForm</div>
EditAgentForm.propTypes =
singleAgent: PropTypes.shape().isRequired,
;
const mapStateToProps = state =>
return
singleAgent: state.singleAgentRequests.singleAgent
;
;
export default connect(mapStateToProps, fetchSingleAgent )(EditAgentForm);
"I expected the populated form output to change but each time I try to edit it I get this error: Uncaught TypeError: Cannot read property 'setState' of undefined."
javascript reactjs redux
javascript reactjs redux
asked Mar 24 at 14:42
val15val15
11
11
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
In constructor, you need to bind all function(which contain this
parameter). Since you did not bind these function, you get error setState of undefined. Because this
parameter is undefined.
Thanks alot. I totally forgot to bind my functions. This solved it.
– val15
Mar 24 at 15:06
add a comment |
Change your methods to arrow functions, so instead of onSubmit()
you would use onSubmit = () =>
, we do this so we don't have to bind this
explicitly in the constructor.
The reason why this works is because arrow functions lexically bind their context (where it appears in code) so this actually refers to the originating context, ie our class instance.
Thanks for this valuable information and feedback.
– val15
Mar 24 at 15:31
No problem, be sure to accept an answer and upvote any that were helpful
– Paul McLoughlin
Mar 24 at 15:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55324946%2fgetderivedstatefromprops-no-showing-any-changes-on-my-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
In constructor, you need to bind all function(which contain this
parameter). Since you did not bind these function, you get error setState of undefined. Because this
parameter is undefined.
Thanks alot. I totally forgot to bind my functions. This solved it.
– val15
Mar 24 at 15:06
add a comment |
In constructor, you need to bind all function(which contain this
parameter). Since you did not bind these function, you get error setState of undefined. Because this
parameter is undefined.
Thanks alot. I totally forgot to bind my functions. This solved it.
– val15
Mar 24 at 15:06
add a comment |
In constructor, you need to bind all function(which contain this
parameter). Since you did not bind these function, you get error setState of undefined. Because this
parameter is undefined.
In constructor, you need to bind all function(which contain this
parameter). Since you did not bind these function, you get error setState of undefined. Because this
parameter is undefined.
answered Mar 24 at 15:00
sdkcysdkcy
1,723614
1,723614
Thanks alot. I totally forgot to bind my functions. This solved it.
– val15
Mar 24 at 15:06
add a comment |
Thanks alot. I totally forgot to bind my functions. This solved it.
– val15
Mar 24 at 15:06
Thanks alot. I totally forgot to bind my functions. This solved it.
– val15
Mar 24 at 15:06
Thanks alot. I totally forgot to bind my functions. This solved it.
– val15
Mar 24 at 15:06
add a comment |
Change your methods to arrow functions, so instead of onSubmit()
you would use onSubmit = () =>
, we do this so we don't have to bind this
explicitly in the constructor.
The reason why this works is because arrow functions lexically bind their context (where it appears in code) so this actually refers to the originating context, ie our class instance.
Thanks for this valuable information and feedback.
– val15
Mar 24 at 15:31
No problem, be sure to accept an answer and upvote any that were helpful
– Paul McLoughlin
Mar 24 at 15:32
add a comment |
Change your methods to arrow functions, so instead of onSubmit()
you would use onSubmit = () =>
, we do this so we don't have to bind this
explicitly in the constructor.
The reason why this works is because arrow functions lexically bind their context (where it appears in code) so this actually refers to the originating context, ie our class instance.
Thanks for this valuable information and feedback.
– val15
Mar 24 at 15:31
No problem, be sure to accept an answer and upvote any that were helpful
– Paul McLoughlin
Mar 24 at 15:32
add a comment |
Change your methods to arrow functions, so instead of onSubmit()
you would use onSubmit = () =>
, we do this so we don't have to bind this
explicitly in the constructor.
The reason why this works is because arrow functions lexically bind their context (where it appears in code) so this actually refers to the originating context, ie our class instance.
Change your methods to arrow functions, so instead of onSubmit()
you would use onSubmit = () =>
, we do this so we don't have to bind this
explicitly in the constructor.
The reason why this works is because arrow functions lexically bind their context (where it appears in code) so this actually refers to the originating context, ie our class instance.
edited Mar 24 at 15:10
answered Mar 24 at 15:05
Paul McLoughlinPaul McLoughlin
1,3662917
1,3662917
Thanks for this valuable information and feedback.
– val15
Mar 24 at 15:31
No problem, be sure to accept an answer and upvote any that were helpful
– Paul McLoughlin
Mar 24 at 15:32
add a comment |
Thanks for this valuable information and feedback.
– val15
Mar 24 at 15:31
No problem, be sure to accept an answer and upvote any that were helpful
– Paul McLoughlin
Mar 24 at 15:32
Thanks for this valuable information and feedback.
– val15
Mar 24 at 15:31
Thanks for this valuable information and feedback.
– val15
Mar 24 at 15:31
No problem, be sure to accept an answer and upvote any that were helpful
– Paul McLoughlin
Mar 24 at 15:32
No problem, be sure to accept an answer and upvote any that were helpful
– Paul McLoughlin
Mar 24 at 15:32
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55324946%2fgetderivedstatefromprops-no-showing-any-changes-on-my-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown