I am new to reactjs and trying to print update value of input field. What I firstly tried was this:

  var App = React.createClass({
   render() {
    return <div>
      <h1>Hello, {this.props.name}</h1>
      <input type="text" onKeyUp={this.handleChange} />
      <p>{this.handleChange}</p>
    </div>;
  },
  handleChange: function(event) {
    return event.target.value;
  }
});
App = React.createFactory(App);

React.render(
  <App name="World" />, 
  document.getElementById('mount-point'));

But I don't get it why it is not working. Than I tried this: CodePen maybe someone can help me with printing instantly the value of the input field in the <p> element

I am new to reactjs and trying to print update value of input field. What I firstly tried was this:

  var App = React.createClass({
   render() {
    return <div>
      <h1>Hello, {this.props.name}</h1>
      <input type="text" onKeyUp={this.handleChange} />
      <p>{this.handleChange}</p>
    </div>;
  },
  handleChange: function(event) {
    return event.target.value;
  }
});
App = React.createFactory(App);

React.render(
  <App name="World" />, 
  document.getElementById('mount-point'));

But I don't get it why it is not working. Than I tried this: CodePen maybe someone can help me with printing instantly the value of the input field in the <p> element

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Oct 4, 2016 at 9:54 SireiniSireini 4,2621313 gold badges5555 silver badges9696 bronze badges 4

• You need to store the value of the change into state (e.g. this.setState({ myInputValue: event.target.value });) within your handleChange. Then you can "print" the value in your p like so: <p>{this.state.myInputValue}</p>. – ctrlplusb Commented Oct 4, 2016 at 9:56
• Highly remend you go through the docs and tutorials. facebook.github.io/react/docs/thinking-in-react.html Otherwise you are just guessing at the API. – ctrlplusb Commented Oct 4, 2016 at 9:57
• Also relevant docs: facebook.github.io/react/docs/forms.html – ctrlplusb Commented Oct 4, 2016 at 9:58
• @ctrlplusb yes I was looking into that, but I thought maybe there was a way to get value in handleChange event – Sireini Commented Oct 4, 2016 at 10:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

var App = React.createClass({
    getInitialState: function() {
        return {
            text: "",
        };
    },
    handleChange: function(event) {
        this.setState({ text: event.target.value });
    },
    render() {
        return <div>
            <h1>Hello, {this.props.name}</h1>
            <input type="text" onChange={this.handleChange} />
            <p>{this.state.text}</p>
        </div>;
    },
});

You must store all state of the ponent in this.state. Use this.setState to update the state. When you update the state, the ponent is automatically rerendered with the new state.

The content of the paragraph is the current value of the state. onChange is monly used instead of onKeyUp to handle changes of state in text inputs. handleChange will update the state when the text input changes.