title: Adding multiple field.ids to a React form?
body: <p>this is my first question on Stack Overflow. I am trying to make a React form that when you select a country it comes up with different fields to fill out and then submit.</p>
  <p>So far with my code I can only use one field.id in my form when I select Brazil as my country. How do I make it so that I can have multiple fields come up to fill in?</p>
  <p>I have just started learning React and this is for a project. Any help is greatly appreciated! Thank you!</p>
  <p>The link to my app is here with all of the code: <a href="https://codesandbox.io/s/react-form-example-forked-7fkgz?file=/src/Form.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-form-example-forked-7fkgz?file=/src/Form.js</a></p>
  <p>Here is my code so far(my Form.js code):</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Field from &quot;../src/Field&quot;;
  import styles from &quot;../src/styles.css&quot;;
  
  const fields = [];
  
  export default class Form extends Component {
    constructor(props) {
      super(props);
      this.state = {
        fields: [
          {
            id: &quot;first-name&quot;,
            className: &quot;label&quot;,
            name: &quot;first_name&quot;,
            label: &quot;First Name&quot;,
            type: &quot;text&quot;,
            defaultValue: &quot;&quot;,
            isShowing: false
          },
          {
            id: &quot;martial-status&quot;,
            name: &quot;martial_status&quot;,
            label: &quot;Martial Status&quot;,
            type: &quot;text&quot;,
            defaultValue: &quot;&quot;,
            isShowing: false
          },
          {
            id: &quot;country&quot;,
            name: &quot;country&quot;,
            label: &quot;Country&quot;,
            type: &quot;select&quot;,
            defaultValue: &quot;Canada&quot;,
            options: [
              {
                className: &quot;label&quot;,
                value: &quot;Canada&quot;,
                label: &quot;Canada&quot;
              },
  
              {
                className: &quot;label&quot;,
                value: &quot;Brazil&quot;,
                label: &quot;Brazil&quot;
              }
            ],
            isShowing: true
          }
        ]
      };
      this.handleFieldsChange = this.handleFieldsChange.bind(this);
    }
    handleFieldsChange(name, value) {
      if (name === &quot;country&quot; &amp;&amp; value === &quot;Brazil&quot;) {
        this.setState({
          fields: this.state.fields.map((field) =&gt;
            field.id === &quot;first-name&quot; ? { ...field, isShowing: true } : field
          )
        });
      }
    }
  
    render() {
      console.log(this.state.fields);
      return (
        &lt;div className=&quot;pkg-settings&quot;&gt;
          &lt;form method=&quot;post&quot;&gt;
            &lt;table className=&quot;form-table&quot;&gt;
              &lt;tbody&gt;
                {this.state.fields.map((fields) =&gt; (
                  &lt;Field
                    key={fields.id}
                    attr={fields}
                    handleFieldsChange={this.handleFieldsChange}
                  /&gt;
                ))}
              &lt;/tbody&gt;
            &lt;/table&gt;
  
            &lt;p className=&quot;submit&quot;&gt;
              &lt;input
                type=&quot;submit&quot;
                name=&quot;submit&quot;
                id=&quot;submit&quot;
                className=&quot;buttonbutton-primarybutton-large&quot;
                value=&quot;Submit&quot;
              /&gt;
            &lt;/p&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>