Form errors with handleInputChange in component

Question

I'm using map to loop over an array of objects. I'm using this data to populate a form however I'm having trouble with the handleInputChange function. How do I initiate handleInputChange when I'm using a components. The error I get is this.setState is not a function at handleInputChange

Path: formComponent.jsx

   return (
      <li>
        <SingleInput
          inputType={'text'}
          title={'Company name'}
          name={'position.company'}
          controlFunc={this.props.handleInputChange}
          content={this.props.company}
          placeholder={'Company name'}
          bsSize={null}
        />

      </li>
    );

CareerHistoryPositionsUpdateForm.propTypes = {
  company: PropTypes.string,
  title: PropTypes.string,
  controlFunc: PropTypes.string
};

Path: `form.jsx'

handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

  this.setState({
    [name]: value
  });
}

renderPositions() {
  const profileCandidateCollection = this.props.profileCandidate;
  const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;
  if (careerHistoryPositions) {
    return careerHistoryPositions.map((position) => {

      return (
        <CareerHistoryPositionsUpdateForm
          key={position.uniqueId}
          company={position.company}
          controlFunc={this.handleInputChange}
        />
      )
    })
  }
}

render() {
  return (
    <form className="careerHistoryForm" onSubmit={this.handleFormSubmit}>
      <ul>
        <p>Test</p>
        {this.renderPositions()}
      </ul>

      <input type="submit" className="btn btn-primary" value="Save" />
    </form>
  );
}

Possible duplicate of [Unable to access React instance (this) inside event handler](https://stackoverflow.com/questions/29577977/unable-to-access-react-instance-this-inside-event-handler) — Felix Kling, Jun 16 '17 at 01:52

Jonny Buchanan · Accepted Answer · 2017-06-14T04:03:02.157

0

You need to bind handleInputChange to the instance of the component so this inside the function references the expected object when it's called:

class YourComponent extends React.Component {
  constructor(props) {
    super(props)
    this.handleInputChange = this.handleInputChange.bind(this)
  }
}

If you're using babel-preset-stage-2 (or using tooling which configures the necessary Babel plugin for you, such as create-react-app), you can use this slightly nicer syntax to bind the function when you're defining it:

class YourComponent extends React.Component {
  handleInputChange = (event) => {
    // ...
  }
}

edited Jun 14 '17 at 04:03

answered Jun 14 '17 at 03:57

Jonny Buchanan

61,926
17
143
150

hmmm. I'm getting this error `You provided a 'value' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultValue'. Otherwise, set either 'onChange' or 'readOnly'. Check the render method of 'FormControl'.` – bp123 Jun 14 '17 at 04:12
Sorry, not sure what I've changed but the error has disappeared. Now I can't type in the input field and there are no errors in console. – bp123 Jun 14 '17 at 04:31
You are providing value to an input but you are not providing an onChange handler to that input. That's why react is giving that warning. According to this warning, that input type is in FormControl component. – Ritesh Bansal Jun 14 '17 at 04:44
Thanks Ritesh, if I `console.log(this.state);` at the end of `handleInputChange` I can see it changing adding the last letter. It only allows 1 character. – bp123 Jun 14 '17 at 05:02

Form errors with handleInputChange in component

1 Answers1

Linked