Get value from component B in component A in react-native - reactjs

Question

I have a component for dropdown (name : JDrop) :
import React, { Component } from 'react';
import { View,Picker,Image } from 'react-native';
export default class JDrop extends Component {
constructor(props,state) {
super(props)
this.state = {
selectedValue:'',
}
}
render() {
const {items,sizeW,bColor} = this.props;
return (
<View style={{flexDirection: 'row',height: 35, width: sizeW, alignItems: 'center',backgroundColor:bColor}}>
<View>
<Image style={{width:20,height:10, margin:5}} source={require('../../assets/Images/arrowb.png')}/>
</View>
<View >
<Picker
mode='dropdown'
style={{height: 35, width: sizeW,backgroundColor:bColor}}
selectedValue={this.state.selectedValue}
onValueChange={(itemValue, itemIndex) => this.setState({selectedValue: itemValue})}
prompt='Select...'
>
{
items.map( (item,ind) => (
<Picker.Item label={item.name} value={item.value} key={ind} />
))
}
</Picker>
</View>
</View>
)
}
}
I use it in App.js like :
<JDrop items={this.state.priority} sizeW={200} bColor={'blue'} ></JDrop>
how can I get selectedValue from JDrop in App.js ?

Answer 1

There are a few ways, but the easiest is to pass a change handler from the parent to the child that can communicate the changes in the child. Like this:
class App extends React.Component {
onChangeJDrop = (val) => {
console.log(val)
}
render() {
return (
<JDrop onChange={this.onChangeJDrop} items={this.state.priority} sizeW={200} bColor={'blue'} ></JDrop>
)
}
}
class JDrop extends React.Component {
onValueChange = (itemValue, itemIndex) => {
this.setState({selectedValue: itemValue})
this.props.onChange(itemValue)
}
render() {
return (
<Picker onValueChange={this.onValueChange} />
)
}
}

Answer 2

You will need to pass in a callback into your JDrop component (named onSelect below):
<JDrop onSelect={this.onSelect} items={this.state.priority} sizeW={200} bColor={'blue'} ></JDrop>
Then in your JDrop component:
onValueChange={(itemValue, itemIndex) => {
this.setState({selectedValue: itemValue})
this.props.onSelect(itemValue)
} }