ReactJS - 'valueLink' is deprecated set `value` and `onChange` instead

Question

I am currently learning ReactJS following a tutorial by the excellent Wes Bos, however I have reached a section regarding 2 way data binding and it seems the method Wes is teach

Answer 1

No easy/messy 2-way data binding with modern React!

What console is trying to tell you is that you should use the "value" property to define the value of that input, and the "onChange" property to define the function that will trigger the change.

So, you'd have:

<input 
  type="text" 
  value={name} 
  onChange={(event) => { onNameChange(event.target.value)}}
/>

And it would be the onNameChange method that would cause your "name" variable to change to the input's new value.

Do note, that onNameChange method would be something you have defined yourself, there's nothing special about it; it could be as elegant or hacky as you'd like. Nowadays, you'd probably want to have it dispatching an action that would update the single source of truth that is your app's state. Take a look at Redux, you do have a lot of learning ahead of you ;-)

Answer 2

Yeah, the tutorial is for an older version of ReactJS because ReactLink is deprecated.

The recommendation is that you use the onChange event handler to set the state value:

<input type="text" name="name" onChange={ this.onInputChange.bind(this) } />

Basically, you have to create a method called onInputChange() and handle the change there.

This is just for reference, in the end, you should probably just refer to a newer tutorial. I recommend this one.

Answer 3

Ok so the issue I am having is with "valueLink", console says I should be using 'value' and 'onChange' in its place. Could anyone help me out with this issue, seems a lot of the learning involved with react is trying to stay on top of all the deprecated elements!

Value Link is the design pattern, Facebook cannot deprecate it. They will just remove their implementation of that pattern from the React core. Read through this article for explanation about the pattern:

https://medium.com/@gaperton/managing-state-and-forms-with-react-part-1-12eacb647112#.5o63wmy72

No easy/messy 2-way data binding with modern React!

You don't have to use their implementation of value links (it's very limited anyway). And you don't have to write everywhere these stupid callbacks either. This one, which is presented in the article, is way more powerful.

https://www.npmjs.com/package/valuelink