CODEWITHSUNDEEP
react-native
nastassia
nastassia

Reputation: 897

How to pass Picker value to parent component in React Native

I have a child Picker and it should pass selected value to it's parent. Components are in different .js files if it's important. How can I pass the states of selected items?

parent

<RegionPicker regions={this.props.navigation.state.params.regionsJSON}/>

child:

export default class RegionPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected1: '1',
      selected2: '1'
        };
  }
  onValueChange1(value: string) {
    this.setState({selected1: value},
                  ()=>{ console.log('new',this.state.selected1)}
    );
  }
  onValueChange2(value: string) {
    this.setState({selected2: value},
                  ()=>{ console.log('new',this.state.selected2)}
    );
  }

    render() {
       return (
         <View>
             <Form>
               <Item inlineLabel>
                 <Label style={{fontSize:16}}>Region</Label>
                 <Picker
                   iosHeader="Select one"
                   mode="dropdown"
                   placeholder='...'
                   selectedValue={this.state.selected1}
                   onValueChange={this.onValueChange1.bind(this)}
                 >
                     {this.getRegions(this.props.regions).map((item, index) => {
                       return (<Picker.Item label={item} value={item} key={index}/>)
                     })}
                 </Picker>
               </Item>
               <Item inlineLabel last>
                 <Label style={{fontSize:16}}>Suburb</Label>
                 <Picker
                   iosHeader="Select one"
                   mode="dropdown"
                   placeholder='...'
                   selectedValue={this.state.selected2}
                   onValueChange={this.onValueChange2.bind(this)}
                 >
                 {this.getSuburbs(this.state.selected1).map((item, index) => {
                   return (<Picker.Item label={item} value={item} key={index}/>)
                 })}

               </Picker>
               </Item>
             </Form>

         </View>
       );
     }
   }

I would appreciate for any help and ideas.

Upvotes: 1

Views: 2547

Answers (2)

Dan
Dan

Reputation: 8794

In your parent, create a function that will capture your RegionPicker value. In this example, myFunction.

myFunction = (value) => {
  console.log(value);
}

Then pass down your function as a prop, like so:

<RegionPicker 
    regions={this.props.navigation.state.params.regionsJSON} 
    onChange={e => { this.myFunction(e) }}
/>

Inside of RegionPicker you can simply call your function within onValueChange1() and onValueChange2().

this.props.onChange(value);

You should also .bind() your functions within the constructor. So inside of your RegionPicker you can add 

this.onValueChange1 = this.onValueChange1.bind(this);
this.onValueChange2 = this.onValueChange2.bind(this);

And then just call this.onValueChange1 in your Picker's onValueChange function.

Upvotes: 4

HpDev
HpDev

Reputation: 2927

As i thing you can do one thing you can get the value in the parent component 

onValueChange={()=>{this.props.onValueChange1()}}

And in the component you call this function so you will get value 

<RegionPicker onValueChange1={()=>{this.calculate()}}/>

calling the function in parent state will be 

calculate (value: string){
 **Do you logic stuff here **

 }

May you get the value now

Upvotes: 0

Related Questions