How to set state key value pair dynamically in react native? - react-native

Question

I am developing an ecommerce app where i need to show product options like Size, color etc.
These options are coming dynamically from API.
I am using Picker component of react native to show option values so that user can choose a value.
Now issue is i select a value, it does not reflect in picker value because i don't know that how to define state variables for pickers dynamically.
so that i can update state values when picker onchangevalue is called.
Initially state looks like this:
state = {
options: {}
}
Now i want that this should dynamically add options to this blank object so it will look like this:
state = {
options: {
Size: '0.5"',
Colour: 'White Dudhiya'
}
}
And after I'll create it then How to access these state variables in any other function.
Please correct me if i am moving in wrong direction and share the correct way to achieve the same.
Please let me know if you need more information from my side.
Any help appreciated.
Thanks
Edit:
This is how i am rendering product options and their values dynamically:
renderOptions(data) {
if (data.options.length > 0) {
var allOptions = data.options.map((item) => {
if (item.product_option_value.length > 0) {
return (
<View key={item.option_id} style={{ marginLeft: 10, marginRight: 10, marginBottom: 15, width: windowWidth - 20 }}>
<MyAppText>{item.name}</MyAppText>
<View style={{ borderWidth: 1, borderColor: '#E8E8E8', marginTop: 5, height: 50 }}>
<Picker
selectedValue={this.state.options[item.name]}
style={{ height: 50, width: '100%' }}
onValueChange={(itemValue, itemIndex) =>
this.setState(() => {
key = item.name;
return {key: itemValue};
})
}
>
{this.renderOptionValues(item)}
</Picker>
</View>
</View>
);
} else {
return;
}
});
return allOptions;
}
}
renderOptionValues(option) {
if (option.product_option_value.length > 0) {
return (option.product_option_value.map((optionValue) => {
return (
<Picker.Item key={optionValue.option_value_id} label={entities.decode(optionValue.name)} value={optionValue.option_value_id} />
);
}));
}
}
I call renderOptions() function inside my render() function.

Answer 1

Take a look at the following implementation, I just tried with some hypothetical values and it worked fine.
class DynamicOptions extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
renderOptions = (options = []) => {
return options.map(option => {
return <Picker.Item label={option.label} value={option.value} key={option.key}/>
});
}
render() {
const {
options
} = this.props;
console.log(this.state);
return ( <
View style = {{ flex: 1 }} >
{
options.map((item, index) => {
return (
<View style={{flex: 1}}>
{
options.map((item, index) => {
return (
<View key={`item-${index}`}>
<Text>{item.name}</Text>
<Picker
selectedValue={this.state[item.name]}
style={{ height: 50, width: '100%' }}
onValueChange={(listItem, index) => {
this.setState({
[item.name]: listItem
});
}}
>
{ this.renderOptions(item.options) }
</Picker>
</View>
)
})
}
</View>
)
}
}
export default DynamicOptions;
Following data I have used to render options (I am not sure what data you are using)
const options = [
{
name: 'Color',
options: [{label: 'Red', value: 'Red', key: 'Red'}, {label: 'Green', value: 'Green', key: 'Green'}]
},
{
name: 'Size',
options: [{label: '1', value: '1', key: '1'}, {label: '2', value: '2', key: '2'}]
}
];
This is how I have called that function
<DynamicOptions options={options}/>
Hope this will help!

Answer 2

according to https://stackoverflow.com/a/35398253/2083099 , I believe you need something like this,
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, FlatList, Image, TouchableOpacity, Dimensions, Picker } from 'react-native';
export default class Test extends Component {
constructor() {
super();
this.state = {
services: [],
selectedService: 'a'
}
}
componentDidMount() {
//replace api request instead of setTimeout and then change the services data with setState
setTimeout(() => {
this.setState({
services: [ 'one', 'two', 'three', 'four', 'five' ]
})
}, 3000)
}
render() {
return (
<View>
<Text>Pick a service</Text>
<Picker
selectedValue={this.state.selectedService}
onValueChange={(service) => (this.setState({ selectedService: service }))} >
{this.state.services.map((s, i) => {
return <Picker.Item key={i} value={s} label={s} />
})}
</Picker>
</View>
);
}
}