react native picker packaging components - react-native

Question

child component
<View style={{flex:1}}>
<Picker
selectedValue={this.props.questions}
onValueChange={}//I do not know how to write here
// onValueChange={(value) => this.setState({questions1 :value})}
mode="dropdown"
style={{color:'#f00'}}
>
<Picker.Item label="1" value="1"/>
<Picker.Item label="2" value="2"/>
<Picker.Item label="3" value="3"/>
<Picker.Item label="4" value="4"/>
</Picker>
</View>
parent component
render() {
var items=[];
for (var i = 0; i < myData.length; i++) {
this.state["questions"+i]=1
items.push(
<SelectValue
questions={this.state['questions'+i]}>
</SelectValue>
)
}
return (
{items}
)
Now I don't know how to write the onValueChange={}.
I want the child component(picker) can be reused.
So when the picker's value change the parent state also change, that what I want

Answer 1

from parent component you can pass a function as a prop.
render() {
var items=[];
for (var i = 0; i < myData.length; i++) {
this.state["questions"+i]=1
items.push(
<SelectValue
onValueChange={(value) => this.setState({["questions"+i]:value})}
questions={this.state['questions'+i]}>
</SelectValue>
)
}
return ({items})
}
in child component
<View style={{flex:1}}>
<Picker
selectedValue={this.props.questions}
onValueChange={this.props.onValueChange}
mode="dropdown"
style={{color:'#f00'}}
>
<Picker.Item label="1" value="1"/>
<Picker.Item label="2" value="2"/>
<Picker.Item label="3" value="3"/>
<Picker.Item label="4" value="4"/>
</Picker>
</View>