0

I am new to react and so confused in handling and calling the onChange events.

Now , I have 2 components :-

    1. Parent component - 

  updateField = e => {
        console.log("update field e called");
        this.setState({
            value: e.target.value
        });
    };

  <InputTypeahead value={this.state.value} label="Email" onChange={this.updateField} typeaheadItems={this.emailAdressess} /

where I am calling the onChange and taking the current value out. Till now whatever I type in Input I get the value.

Now,

2.In Child component :

I want to take the value coming from this parent component and using that would like to setstate.

How to achieve this in React js ? I have tried using refs , but result was not successful.

Any Help is appreciated.Thanks.

pourushsingh gaur
  • 59
  • 1
  • 9

1 Answers1

0

From version i.e 16.3.0 onwards, you can make use of getDerivedStateFromProps method to update the state based on props like

class InputTypeahead extends React.Component {
    state = {
       value: ''
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        if(nextProps.value !== prevState.value) {
           return { value: nextProps.value};
        }
        return null;
    }

}

According to the docs:

getDerivedStateFromProps is invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates.

Before v16.3.0, you would make use of constructor along with componentWillReceiveProps like

class InputTypeahead extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
           value: props.value
       }
    } 
    componentWillReceiveProps(nextProps) {
        if(nextProps.value !== this.props.value) {
           this.setState({ value: nextProps.value});
        }
    }
}
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • Thank you shubham.But in project we are using 16.2.Could you please guide ? – pourushsingh gaur May 02 '18 at 06:44
  • Updated the answer for that, please check – Shubham Khatri May 02 '18 at 06:46
  • Thanks shubham ..I Ignored the lifecycle hooks ..haha :) – pourushsingh gaur May 02 '18 at 06:53
  • @pourushsinghgaur, lifecycle hooks are the best thing in React and its best to know which lifecycle are called at what times. Anyways glad to have helped – Shubham Khatri May 02 '18 at 06:54
  • Sure I ll Improve my knowledge to that.I want to understand one thing , In my parent component---m calling on change--capturing the calue entered by user.In child component I need to call , Child's onchange so that I can setState. – pourushsingh gaur May 02 '18 at 09:58
  • By taking the value in componentWillReceiveProps and setting the state gives me all the time the value that user entered.In my case I need to capture the value from say a suggestion list or a typeahead list. – pourushsingh gaur May 02 '18 at 10:01
  • As a rule , you must have a single source of truth, so you must ideally store the value in parent and modify the same , instead of updating state in child based on props. Check this https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs/38397755#38397755 – Shubham Khatri May 02 '18 at 10:01
  • Okay , I got this point how to return some value from child to parent component through props.But Another thing is In Parent -->i am setting state as this.setState({e.target.value}) ;So if I return some value from child to parent as props to the same onChange function-->It gives errors like target is undefined ! – pourushsingh gaur May 02 '18 at 10:23
  • Could you please guide how to handle this scenario pls ? – pourushsingh gaur May 02 '18 at 10:40