Facing this Error : Failed propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. Check the render method of BasicInputBox.

I am returning Following Component :

<BasicInputBox label="Student Name :" valChange={this.nameChange} value={datafield.name}/>

and the ponent :

var BasicInputBox = React.createClass({
    render: function() {
    return <div>
        <tr>
        <td><label> { this.props.label } </label></td>
        <td><input type="text" onChange={ this.props.valChange } value={ this.props.value } /></td>
      </tr>
    </div>
    }
});

Value is not changing while changing in text field. And the following is the function of nameChange function

Facing this Error : Failed propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. Check the render method of BasicInputBox.

I am returning Following Component :

<BasicInputBox label="Student Name :" valChange={this.nameChange} value={datafield.name}/>

and the ponent :

var BasicInputBox = React.createClass({
    render: function() {
    return <div>
        <tr>
        <td><label> { this.props.label } </label></td>
        <td><input type="text" onChange={ this.props.valChange } value={ this.props.value } /></td>
      </tr>
    </div>
    }
});

Value is not changing while changing in text field. And the following is the function of nameChange function

• javascript
• php
• reactjs

Share Improve this question Follow edited Dec 15, 2015 at 11:23 Jon Surrell 9,65788 gold badges5151 silver badges5555 bronze badges asked Dec 15, 2015 at 10:51 ParamParam 2111 gold badge44 silver badges1414 bronze badges 4

• nameChange: function(event){ this.setState({name: event.target.value}) }, – Param Commented Dec 15, 2015 at 10:51
• And can we assume that value will be correctly updated by a render call, and that nameChange will be changing a state somewhere that will cause a re-render? It would be helpful to see that code. – Jon Surrell Commented Dec 15, 2015 at 11:12
• tr is not a legal child of div. Please show more code and make sure this is clean and working (up to the point where you're having trouble). – Jon Surrell Commented Dec 15, 2015 at 11:21
• See spec: Contexts in which this element can be used. tr elements can't appear just anywhere. – Jon Surrell Commented Dec 15, 2015 at 11:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Your code appears to work fine, assuming the parts you have not shared are working correctly.

If you're having trouble, it is likely in the listener or in the render of the parent ponent. Here is a working example with your element (note: I have modified structure slightly to ensure legal html):

var BasicInputBox = React.createClass({
    render: function() {
    return <div>
        <label> { this.props.label } </label>
        <input type="text" onChange={ this.props.valChange } value={ this.props.value } />
    </div>
    }
});
var Wrapper = React.createClass({
  getInitialState: function() {
    return {
      datafield: {
        name: ''
      }      
    }
  },
  nameChange: function(e) {

    this.setState({datafield: {name: e.currentTarget.value}})

  },
  render: function() {
    let datafield = this.state.datafield
    return <BasicInputBox label="Student Name :" valChange={this.nameChange} value={datafield.name}/>
  }
})

Working snippet (ugly after babel/jsx translation).

"use strict";

var BasicInputBox = React.createClass({
  displayName: "BasicInputBox",

  render: function render() {
    return React.createElement(
      "div",
      null,
      React.createElement(
        "tr",
        null,
        React.createElement(
          "td",
          null,
          React.createElement(
            "label",
            null,
            " ",
            this.props.label,
            " "
          )
        ),
        React.createElement(
          "td",
          null,
          React.createElement("input", { type: "text", onChange: this.props.valChange, value: this.props.value })
        )
      )
    );
  }
});
var Wrapper = React.createClass({
  displayName: "Wrapper",

  getInitialState: function getInitialState() {
    return {
      datafield: {
        name: ''
      }
    };
  },
  nameChange: function nameChange(e) {
    this.setState({ datafield: { name: e.currentTarget.value } });
  },
  render: function render() {
    var datafield = this.state.datafield;
    return React.createElement(BasicInputBox, { label: "Student Name :", valChange: this.nameChange, value: datafield.name });
  }
});

ReactDOM.render(React.createElement(Wrapper, null), document.getElementById('app'));

<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<div id="app"></div>