Pass user input value through props in react.js

Question

I have 2 component, how do I pass user entered value through onChange to parent component? I'm able to pass the 'trigger' upon onChange, but how to pass the value along?

https://jsfiddle.net/gboaxm30

var InputComp = React.createClass({
  render: function() {
    return (
    <div>
     <input type="text" onChange={this.props.newVal} />
     </div>
    );
  }
});

var App = React.createClass({
    getInitialState(){
  return {
     inputVal: 0
  }
  },
  inputChangedHandler(props) {
    //set user changed value to inputVal
    console.log(props)
  },
  render() {
    return(
    <div>
        <InputComp newVal={this.inputChangedHandler}/>
      <h4>{this.state.inputVal}</h4>
      </div>
    )
  }
})

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Shubham Khatri · Accepted Answer · 2016-10-04 07:09:06Z

1

Call a function on the onChange event of the child component and then access the value of input like e.target.value and then pass it to the parent component like this.props.newVal(e.target.value);

var InputComp = React.createClass({
  handleChange(e) {
    this.props.newVal(e.target.value);
  },
  render: function() {
    return (
    <div>
     <input type="text" onChange={this.handleChange} />
     </div>
    );
  }
});

var App = React.createClass({
    getInitialState(){
  return {
     inputVal: 0
  }
  },
  inputChangedHandler(val) {
    console.log(val);
    this.setState({inputVal: val});
  },
  render() {
    return(
    <div>
        <InputComp newVal={this.inputChangedHandler}/>
      <h4>{this.state.inputVal}</h4>
      </div>
    )
  }
})

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

JSFIDDLE

answered Oct 4, 2016 at 7:09

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jessica Illy Over a year ago

oh I can get it before it got passed, which one is better? the first or second option? the second option is I can get it on the inputChangedHandler using e.target.val too.

Shubham Khatri Over a year ago

refs are for you to access an object like you do with document.getElementById similarly you can access by ref name as this.refs.name

Shubham Khatri Over a year ago

Both are equally good. Only thing with the above method is that if there are multiple input and selects you can handle it internally as to which function from parent to call

Piotr Berebecki · Accepted Answer · 2016-10-04 07:19:41Z

1

I've made a demo for you here: http://codepen.io/PiotrBerebecki/pen/pEAQzV

The idea is to use the so-called controlled input as defined in the React docs: https://facebook.github.io/react/docs/forms.html#controlled-components

 var InputComp = React.createClass({
  getInitialState() {
    return {
      userInput: ''
    };
  },

  onChange(event) {
    this.setState({
      userInput: event.target.value
    });
    this.props.newVal(event.target.value);
  },

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




var App = React.createClass({
  getInitialState() {
    return {
     inputVal: ''
    };
  },

  inputChangedHandler(valueFromChild) {
    console.log('valuefromChild:', valueFromChild);
    this.setState({
      inputVal: valueFromChild
    });
  },

  render() {
    return (
      <div>
        <InputComp newVal={this.inputChangedHandler}/>
        <h4>{this.state.inputVal}</h4>
      </div>
    );
  }
})

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

edited Oct 4, 2016 at 7:19

answered Oct 4, 2016 at 7:13

Piotr Berebecki

7,4684 gold badges37 silver badges43 bronze badges

2 Comments

Shubham Khatri Over a year ago

If you see I have the same demo set up in my answer :)

Piotr Berebecki Over a year ago

Nice :) It's a very common pattern. Although I'm using the controlled input.

naortor · Accepted Answer · 2016-10-04 06:57:34Z

0

You should take the value from the event

  inputChangedHandler(e) {
      //set user changed value to inputVal
      console.log(e.target.value)
  },

answered Oct 4, 2016 at 6:57

naortor

2,09714 silver badges26 bronze badges

5 Comments

Jessica Illy Over a year ago

that simple? just change this part? I don't have to pass the value from the onChange event, but it came with the whole handler?

Jessica Illy Over a year ago

What if it's a select?

naortor Over a year ago

the value is already passed with the event - so yea you can get it from e.target.value. same as with select - just like you would do in vanilla js.

Jessica Illy Over a year ago

I see then what refs is for?

naortor Over a year ago

ref is used to access child elements from the parents like ReactDOM.findDOMNode(this.refs.myInput) for example, but you dont need it here, and its a good practice to avoid using it when you can.

Sabesan · Accepted Answer · 2020-09-29 06:33:15Z

I thinktThis would be helpful for you.

let InputComp = React.createClass({
  getInitialState() {
    return {
      textVal: "",
    };
  },
  handleChange(e) {
    this.setState({ textVal: e.target.value });
    this.props.newVal(this.state.textVal);
  },
  render: function () {
    return (
      <div>
        <input
          type="text"
          onChange={this.handleChange}
          value={this.state.textVal}
        />
      </div>
    );
  },
});

var App = React.createClass({
  getInitialState() {
    return {
      inputVal: 0,
    };
  },
  inputChangedHandler(val) {
    this.setState({ inputVal: val });
  },
  render() {
    return (
      <div>
        <InputComp newVal={this.inputChangedHandler} />
        <h4>{this.state.inputVal}</h4>
      </div>
    );
  },
});

ReactDOM.render(<App />, document.getElementById("container"));

Collectives™ on Stack Overflow

Pass user input value through props in react.js

4 Answers 4

3 Comments

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related