CODEWITHSUNDEEP
reactjs
jgoraya
jgoraya

Reputation: 151

onChange not firing in React app

I'm having a difficult time getting my onChange event to fire when a field within a form in my component is changed. When i make a change in the form the edit is allowed but i get the following error in the browser console

bundle.js:57140 Uncaught TypeError: Cannot set property '' of null

Any thoughts on how to resolve this issue would be of great help!

import React from 'react'; 
import ReactDOM from 'react-dom';
import autoBind from 'react-autobind';
import Form from 'grommet/components/Form';
import TextInput from 'grommet/components/TextInput';
import NumberInput from 'grommet/components/NumberInput';
import DateTime from 'grommet/components/DateTime';
import FormFields from 'grommet/components/FormField';

export default class OverviewEditPane extends React.Component {  

constructor(props) {
  super(props);
  autoBind(this);
  this.onOverviewChange = this.onOverviewChange.bind(this)
}


onOverviewChange(event) {
  let state = this.state;
  let field = event.target.name; 
  let value = event.target.value;
  console.log(field);
  state[field] = value;
  this.setState({state});
}

render () {
  return (
          <table>
            <FormFields>
            <tbody>
                <tr>
                  <td>{this.props.overview.map((P) => {return <TextInput size='small'  key={P.id} id={P.id} value={P.FName} onChange={this.onOverviewChange}  />;})}</td>
                </tr>...

Upvotes: 1

Views: 5478

Answers (2)

Dženis H.
Dženis H.

Reputation: 7822

What you're trying to achieve here is wrong, but what you need (want) to do is probably this:

//Here's your updated function:
    onOverviewChange(e) {
       const { name, value } = e.target; // Dectructuring name and value event
       this.setState({ [name]: value }); // Setting the state to it's new key/ value pairs
    }

.... later in your code, you'll use this function to trigger an onChange method, something like this:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.onOverviewChange = this.onOverviewChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

 onOverviewChange(e) {
   const { name, value } = e.target; // Dectructuring name and value event
   this.setState({ [name]: value }); // Setting the state to it's new key/ value pairs
}

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text"   
          // Here we associate it with our state
          name="value"                        
         // Here's where we make use of our function
         onChange={this.onOverviewChange} /> 
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Upvotes: 0

Tholle
Tholle

Reputation: 112777

{ state } is shorthand for { state: state }. What you really want to do is update just one field in the state, not set the entire current state as state key.

Also make sure you don't mutate the state object directly.

onOverviewChange(event) {
  const { name, value } = event.target; 
  this.setState({ [name]: value });
}

Upvotes: 3

Related Questions