title: How to set state key value pair dynamically in react native?
body: <p>I am developing an ecommerce app where i need to show product options like Size, color etc.</p>
  
  <p>These options are coming dynamically from API.</p>
  
  <p>I am using Picker component of react native to show option values so that user can choose a value.</p>
  
  <p><a href="https://i.stack.imgur.com/xNlk8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xNlk8.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>so that i can update state values when picker onchangevalue is called.</p>
  
  <p>Initially state looks like this:</p>
  
  <pre><code>state = {
          options: {}
      }
  </code></pre>
  
  <p>Now i want that this should dynamically add options to this blank object so it will look like this:</p>
  
  <pre><code>state = {
          options: {
              Size: '0.5"',
              Colour: 'White Dudhiya'
          }
      }
  </code></pre>
  
  <p>And after I'll create it then How to access these state variables in any other function.</p>
  
  <p>Please correct me if i am moving in wrong direction and share the correct way to achieve the same.</p>
  
  <p>Please let me know if you need more information from my side.</p>
  
  <p>Any help appreciated.</p>
  
  <p>Thanks</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>This is how i am rendering product options and their values dynamically:</p>
  
  <pre><code>renderOptions(data) {
  
          if (data.options.length &gt; 0) {
              var allOptions = data.options.map((item) =&gt; {
                  if (item.product_option_value.length &gt; 0) {
                      return (
                          &lt;View key={item.option_id} style={{ marginLeft: 10, marginRight: 10, marginBottom: 15, width: windowWidth - 20 }}&gt;
                              &lt;MyAppText&gt;{item.name}&lt;/MyAppText&gt;
                              &lt;View style={{ borderWidth: 1, borderColor: '#E8E8E8', marginTop: 5, height: 50 }}&gt;
                                  &lt;Picker
                                      selectedValue={this.state.options[item.name]}
                                      style={{ height: 50, width: '100%' }}
                                      onValueChange={(itemValue, itemIndex) =&gt; 
                                          this.setState(() =&gt; {
                                              key = item.name;
                                              return {key: itemValue};
                                          })
                                      }
                                      &gt;
                                          {this.renderOptionValues(item)}
                                  &lt;/Picker&gt;
                              &lt;/View&gt;
  
                          &lt;/View&gt;
                      );
                  } else {
                      return;
                  }
              });
              return allOptions;
          }
      }
  
  renderOptionValues(option) {
          if (option.product_option_value.length &gt; 0) {
              return (option.product_option_value.map((optionValue) =&gt; {
                  return (
                      &lt;Picker.Item key={optionValue.option_value_id} label={entities.decode(optionValue.name)} value={optionValue.option_value_id} /&gt;
                  );
              }));
          }
  
      }
  </code></pre>
  
  <p>I call renderOptions() function inside my render() function.</p>