0

Here I have such code

 h(e) {
        console.log(e.target.value);
        this.setState(state => {
            return {editData: e.target.value};
        });
    }

but it isn't working. e - event - in setState function become null. Is it possible to do such thing?

Valentin Grigorev
  • 135
  • 1
  • 9
  • did you bind the handler function to your class? if not you can like this `h = (e) => {` As a side note / recommendation, you should make your function names more purposeful, something like `handleChange = (e) => {` that way it reads more like a story `onChange={this.handleChange}` – John Ruddell Jul 27 '19 at 01:18
  • I use it this way ``` ``` code almost from render function – Valentin Grigorev Jul 27 '19 at 01:25
  • You need to pass the value though, `value={this.state.editData}` – John Ruddell Jul 27 '19 at 01:41

2 Answers2

1

As Antuan stated, use an arrow function and you avoid the this bind problem.

Try it like 

handleChange = e => { 
          this.setState({ 
    editData: e.target.value 
    })
   }

Without seeing the rest of your code or state but I hope that is what you're looking for.

I guess you have like an input field or something where you're trying to get the value from. Also I would suggest to give your functions better names to make it more obvious what they are doing. Make sure that you set the initial state to an empty or default value to avoid running into issues that the state get's initiated as null (I think it was when you don't set an initial state)

Edit 2: I just learned something new in the comments of my answer which is addressing your actual problem why you get null. Your callback isn't immediate and asynchronous when you write it as a function instead of an object. And by the time it wants to access your synthetic event it is already gone. Thanks for pointing that out @DennisMartinez I hope I haven't butchered or mis-explained the explanation and it makes sense.

Edit: Also set then on the element you want to use that function onChange={this.handleChange}

Cheers

drood87
  • 39
  • 7
  • the react docs recommend setting state via `this.setState( state => {...` – John Ruddell Jul 27 '19 at 02:12
  • Can you show me that? I just re-read the docs and it says you should pass state when you have props passing into it as well as it can be asynchronous. But I'd be happy to see the exact reference in the docs to learn something new :) And ffs take it easy with the downvotes, it doesn't make someone want to help anyone else on this platform. – drood87 Jul 27 '19 at 02:21
  • https://reactjs.org/docs/state-and-lifecycle.html I can't find it anywhere – drood87 Jul 27 '19 at 02:22
  • [**SetState docs**](https://reactjs.org/docs/react-component.html#setstate) and why its preferred to use a function from [**this SO post**](https://stackoverflow.com/a/48209870/2733506) – John Ruddell Jul 27 '19 at 02:22
  • My answer is still not wrong and valid to setState. I don't get it why it gets instantly downvoted. – drood87 Jul 27 '19 at 02:26
  • [**In the link you posted**](https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous), it literally says using an object is `// Wrong` – John Ruddell Jul 27 '19 at 02:26
  • // Correct this.setState({comment: 'Hello'}); That's what the docs say also. – drood87 Jul 27 '19 at 02:28
  • Sure, generally its recommended to use a function. you also said `Why are you passing state as a parameter into this.setState?` in your answer earlier which is wrong. – John Ruddell Jul 27 '19 at 02:31
  • That was my bad and I since deleted my comment. I didn't know about that, so my apologies. Just the instant downvotes here are awful. – drood87 Jul 27 '19 at 02:32
  • @JohnRuddell It's an antipattern to use an object when referencing state for updates. That's what the callback is for, to access state because state may have changed within the timeframe that you've accessed it. Using an object to update state isn't wrong. I'm in agreement with drood87 here. This is by far the best answer in this thread. It would be a better answer if it explained the actually issue, which is the synthetic event is being lost in the callback because the callback isn't immediate, and by the time it get's to the point of accessing the event, it's gone. – Dennis Martinez Jul 27 '19 at 02:33
  • @DennisMartinez I understand the purpose of using a function, my downvote was applied when drood said `Why are you passing state as a parameter into this.setState?`. however after removing, i removed the downvote because the answer is no longer misleading. – John Ruddell Jul 27 '19 at 02:36
  • no. generally it is recommended to use a function because its less error prone. sometimes you end up needing to refactor to a function from an object. – John Ruddell Jul 27 '19 at 02:39
0

Any event handler, such as onChange, onClick, onMouseDown must be bound either by using an arrow function like follows:

h = e => {
    your code here
}

or by binding it in the constructor:

constructor(props){
  super(props)

  this.h = this.h.bind(this)
}

You don't need to bind functions that aren't attached to an event, such as . 

{this.renderDescritption()}

Also make sure you pass the state value to your input element.

<input name="firstname" onChange={this.h} value={this.state.editData} />

More on best practices in React for inputs / forms

John Ruddell
  • 25,283
  • 6
  • 57
  • 86
Antuan
  • 501
  • 2
  • 6
  • 18