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;








0















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."










share|improve this question




























    0















    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."










    share|improve this question
























      0












      0








      0








      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."










      share|improve this question














      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Mar 24 at 14:42









      val15val15

      11




      11






















          2 Answers
          2






          active

          oldest

          votes


















          0














          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.






          share|improve this answer























          • Thanks alot. I totally forgot to bind my functions. This solved it.

            – val15
            Mar 24 at 15:06



















          0














          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.






          share|improve this answer

























          • 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











          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
          );



          );













          draft saved

          draft discarded


















          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









          0














          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.






          share|improve this answer























          • Thanks alot. I totally forgot to bind my functions. This solved it.

            – val15
            Mar 24 at 15:06
















          0














          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.






          share|improve this answer























          • Thanks alot. I totally forgot to bind my functions. This solved it.

            – val15
            Mar 24 at 15:06














          0












          0








          0







          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.






          share|improve this answer













          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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


















          • 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














          0














          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.






          share|improve this answer

























          • 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















          0














          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.






          share|improve this answer

























          • 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













          0












          0








          0







          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.






          share|improve this answer















          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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

















          • 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

















          draft saved

          draft discarded
















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

          SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

          은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현