I am new in reactjs. I am creating a sample project using reactjs. First I am getting error like state is null. After setting intial state i am getting error

I got Warning: valueLink prop on input is deprecated; set value and onChange instead

I know there are many question related to this but my problem is not solved please help.

Here is code:

import React, {Component} from 'react';
import {Link} from 'react-router'
import validator from 'validator';
import LinkedStateMixin from 'react-addons-linked-state-mixin';
module.exports = React.createClass({
  mixins: [LinkedStateMixin],

  getInitialState() {
    return {};
  },

  saveData: function(){
    //console.log(this.state)
  },

  render () {
    return (
      <form>
        <div className="page-content container">
          <div className="row">
            <div className="col-md-4 col-md-offset-4">
              <div className="login-wrapper">
                <div className="box">
                  <div className="content-wrap">
                    <h6>Sign Up</h6>
                    <input className="form-control" name ="email" placeholder="E-mail address" type="text" valueLink={this.linkState('email')}/>
                    <input className="form-control" name="password" placeholder="Password" type="password"/>
                    <input className="form-control" placeholder="Confirm Password" type="password" />
                    <div className="action">
                      <button type="button" className ="btn btn-primary signup" onClick={this.saveData}>Sign Up</button>
                    </div>                
                  </div>
                </div>
                <div className="already">
                  <p>Have an account already?</p>
                  <Link to ="/reactApp/">Login</Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    )
  }
});

I am new in reactjs. I am creating a sample project using reactjs. First I am getting error like state is null. After setting intial state i am getting error

I got Warning: valueLink prop on input is deprecated; set value and onChange instead

I know there are many question related to this but my problem is not solved please help.

Here is code:

import React, {Component} from 'react';
import {Link} from 'react-router'
import validator from 'validator';
import LinkedStateMixin from 'react-addons-linked-state-mixin';
module.exports = React.createClass({
  mixins: [LinkedStateMixin],

  getInitialState() {
    return {};
  },

  saveData: function(){
    //console.log(this.state)
  },

  render () {
    return (
      <form>
        <div className="page-content container">
          <div className="row">
            <div className="col-md-4 col-md-offset-4">
              <div className="login-wrapper">
                <div className="box">
                  <div className="content-wrap">
                    <h6>Sign Up</h6>
                    <input className="form-control" name ="email" placeholder="E-mail address" type="text" valueLink={this.linkState('email')}/>
                    <input className="form-control" name="password" placeholder="Password" type="password"/>
                    <input className="form-control" placeholder="Confirm Password" type="password" />
                    <div className="action">
                      <button type="button" className ="btn btn-primary signup" onClick={this.saveData}>Sign Up</button>
                    </div>                
                  </div>
                </div>
                <div className="already">
                  <p>Have an account already?</p>
                  <Link to ="/reactApp/">Login</Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    )
  }
});

• javascript
• reactjs

• Have you consulted the react docs for handling forms? facebook.github.io/react/docs/forms.html – Maxwelll Commented Oct 25, 2016 at 1:53

5 Answers 5

Please read more about the fundamentals of React and handling state in forms in the React documentation. No mixins or anything plicated required. Also as stated above "ReactLink is deprecated as of React v15. The remendation is to explicitly set the value and change handler, instead of using ReactLink."

Each of your text inputs should have a change handler just like the error message says... There are many ways you could acplish this but below is a basic example. Check out the snippet below in a fiddle here https://jsfiddle/09623oae/

React.createClass({
  getInitialState: function() {
    return({
      email: "",
      password: "",
      passwordConfirmation: ""
    })
  },

  submitForm: function(e) {
    e.preventDefault()
    console.log(this.state)
  },

  validateEmail: function(e) {
    this.setState({email: e.target.value})
  },

  validatePassword: function(e) {
    this.setState({password: e.target.value})
  },

  confirmPassword: function(e) {
    this.setState({passwordConfirmation: e.target.value})
  },

  render: function() {
    return (
      <form onSubmit={this.submitForm}>
        <input 
          type="text"
          value={this.state.email}
          onChange={this.validateEmail}
          placeholder="email"
        />
        <input 
          type="password"
          value={this.state.password}
          onChange={this.validatePassword}
          placeholder="password"
        />
        <input 
          type="password"
          value={this.state.passwordConfirmation}
          onChange={this.confirmPassword}
          placeholder="confirm"
        />            
      </form>
    )
  }
});

Solution

You cannot use valueLink anymore, instead use onChange react event to listen for input change, and value to set the changed value.

class MyForm extends React.Component {
  constructor(props) {
    super(props);    
    this.state = {value: 'Hello!'};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }

Clarification

Notice that since the value is set from a state, it will only get updated from changing the attached state, writing in the input does nothing, unless you listen for the input changed (via onChange event) and update the state accordingly.

source: from React documentation

You should set your state to atleast empty initially, if you want to access it at a later point of time. Something similar to below will do

getInitialState() {
 return {};
},

ReactLink Without valueLink

You can change with

<input type="text" value={valueLink.value} onChange={handleChange} />

Reference:

https://facebook.github.io/react/docs/two-way-binding-helpers.html

This warning happens because the React Link was deprecated in React 0.15:

ReactLink is deprecated as of React v15. The remendation is to explicitly set the value and change handler, instead of using ReactLink.

So, instead of use this.linkState('email') and valueLink:

<input className="form-control" 
    name ="email" 
    placeholder="E-mail address" 
    type="text" 
    valueLink={this.linkState('email')}/>

Use this.state.email and an onChange function:

callThisWhenChangeEmail: function(emailFromInput) {
    this.setState({
        email: emailFromInput
    });
},

render () {
    /* the existent code above */

    <input className="form-control" 
        name ="email" 
        placeholder="E-mail address" 
        type="text" 
        value={this.state.email} 
        onChange={this.callThisWhenChangeEmail}/>

    /* the existent code below */
}

When the user type some e-mail in the input, the function callThisWhenChangeEmail is called, receiving the e-mail as parameter (emailFromInput). So, you only need to set this e-mail in the state.