title: ReactJs - Iterating over an object to create form fields
body: <p>I've decided to iterate over an array and create <code>Form.Field</code> (semantic-ui). Here is my static code that works like a charm:</p>
  
  <pre><code>export default class OrderChange extends Component&lt;Props&gt; {
      constructor() {
          super();
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
      state = {}
      handleChange = (e, { value }) =&gt; this.setState({ value })
       render() {
                    &lt;Form.Field&gt;
                      &lt;Radio
                        label='A'
                        name='radioGroup'
                        value='this'
                        checked={this.state.value === 'this'}
                        onChange={this.handleChange}
                      /&gt;
                    &lt;/Form.Field&gt;
                    &lt;Form.Field&gt;
                      &lt;Radio
                        label='B'
                        name='radioGroup'
                        value='this1'
                        checked={this.state.value === 'this1'}
                        onChange={this.handleChange}
                      /&gt;
                    &lt;/Form.Field&gt;
  
      });
  </code></pre>
  
  <p>I was working on it to creating dynamic data. Firstly, I created an object like this:</p>
  
  <pre><code>    const radios = [
          {
              name:'j',
              value:1
          },
          {
              name:'k',
              value:2
          }
      ];
  </code></pre>
  
  <p>Then, I was trying to iterate on it:</p>
  
  <pre><code>                {radios.map(function (radio, index) {
                      return (
                          &lt;Form.Field&gt;
                              &lt;Radio
                                  label={radio.name}
                                  name='radioGroup'
                                  value='this'
                                  checked={this.state.value === radio.value}
                                  onChange={this.handleChange}
                              /&gt;
                          &lt;/Form.Field&gt;
                      );
                  })}
  </code></pre>
  
  <p>However, I've got this error:</p>
  
  <pre><code>Cannot read property 'state' of undefined
  </code></pre>
  
  <p>in this line:</p>
  
  <pre><code> checked={this.state.value === radio.value}
  </code></pre>
  
  <p>Any suggestion?</p>