input is not updated when button is clicked

Question

Im React newbie:).I created very simple React control called CustomInput, but when the button is clicked, onChange handler is started, but when it's finised value is ok in handller but it's is not updated on form (or is overwritten).

Where is the problem?

My code for CustomInput is following:

"use strict";

var React = require('react');

var CustomInput = React.createClass({
    propTypes: {
        value: React.PropTypes.string.isRequired,
        name: React.PropTypes.string.isRequired        
        /*
    error: React.PropTypes.string
    label: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func.isRequired,
    placeholder: React.PropTypes.string,
    value: React.PropTypes.string,    
    */
    },

    getInitialState: function() {
        debugger;
        return {
            value: '',
            errors: {},
            dirty: false
        };
    },

    onChange: function(event) {
        debugger;        
        var value = event.target.value + "%";
        this.state.value = value;
        console.log("onChange: "+this.state.value);
        return this.setState({value: this.state.value});        
    },

    render: function () {
        var wrapperClass = 'form-group';
        if (this.props.error && this.props.error.length > 0) {
            wrapperClass += " " + 'has-error';
        }

        var textStyle = { "text-align": "center" };

        return (
        <div className={wrapperClass}>
        <label htmlFor={this.props.name}>{this.props.label}</label>
        <div className="field">
        <input type="text"
        name={this.props.name}
        className="form-control"
        placeholder="enter value"
        ref={this.props.name}
        value={this.props.value}
        onChange={this.onChange}
        style={textStyle}
        />
        <div className="input">{this.props.error}</div>
        </div>
        </div>
    );
}
});

module.exports = CustomInput;

UPDATE 1: My component which contains CustomInput controls looks like this:

"use strict";

var React = require('react');
var peopleApi = require('../../../api/peopleApi');
var CustomInput = require('../common/customInput');
//var PeopleList = require('./peopleList');

var AuthorPage = React.createClass({
    getInitialState: function() {
        //debugger; 
        return {
            person: {}
        };
    },

    componentDidMount: function() {
        if (this.isMounted()) {
           //debugger; 
           this.setState({person: peopleApi.getPersonById(this.props.personId)});
        }
    },

    render: function() {
        return (
            <div>
                <h1>Person</h1>
                <CustomInput value={this.state.person.id} name="personId" error = "" label= "ID"/>
                <CustomInput value={this.state.person.name} name="personName" error="" label= "Name"/>
                <CustomInput value={this.state.person.salary} name="personSalary" error="" label="Pensja"/>
                <CustomInput value={this.state.person.spelnieniePercent} name="personSpelnienie" error="" label= "Spelnienie [%]"/>
                <CustomInput value={this.state.person.dataUrodzenia} name="personDataUrodzenia" error="" label="Data urodzenia:"/>
            </div>
        );
    }
});

module.exports = AuthorPage;

UPDATE 2: After updating function onChange():

onChange: function(event) {
    debugger;        
    var value = event.target.value + "%";
    //this.state.value = value;
    //console.log("onChange: "+this.state.value);
    return this.setState({ value }, () => console.log("onChange: ", this.state.value));                
},

But still the same effect: the new value is overwritten by original value.

Answer 1

onChange: function(event) {
    var value = event.target.value + "%";
    // this.state.value = value; << dont do this
    return this.setState({ value }, () => console.log("onChange: ", this.state.value));        
},

Never mutate the state directly, or setState will fail to trigger a re-render as it thought the component is already updated with the new state.