Adding multiple field.ids to a React form?

Question

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.

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?

I have just started learning React and this is for a project. Any help is greatly appreciated! Thank you!

The link to my app is here with all of the code: https://codesandbox.io/s/react-form-example-forked-7fkgz?file=/src/Form.js

Here is my code so far(my Form.js code):

import React, { Component } from "react";
import Field from "../src/Field";
import styles from "../src/styles.css";

const fields = [];

export default class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: [
        {
          id: "first-name",
          className: "label",
          name: "first_name",
          label: "First Name",
          type: "text",
          defaultValue: "",
          isShowing: false
        },
        {
          id: "martial-status",
          name: "martial_status",
          label: "Martial Status",
          type: "text",
          defaultValue: "",
          isShowing: false
        },
        {
          id: "country",
          name: "country",
          label: "Country",
          type: "select",
          defaultValue: "Canada",
          options: [
            {
              className: "label",
              value: "Canada",
              label: "Canada"
            },

            {
              className: "label",
              value: "Brazil",
              label: "Brazil"
            }
          ],
          isShowing: true
        }
      ]
    };
    this.handleFieldsChange = this.handleFieldsChange.bind(this);
  }
  handleFieldsChange(name, value) {
    if (name === "country" && value === "Brazil") {
      this.setState({
        fields: this.state.fields.map((field) =>
          field.id === "first-name" ? { ...field, isShowing: true } : field
        )
      });
    }
  }

  render() {
    console.log(this.state.fields);
    return (
      <div className="pkg-settings">
        <form method="post">
          <table className="form-table">
            <tbody>
              {this.state.fields.map((fields) => (
                <Field
                  key={fields.id}
                  attr={fields}
                  handleFieldsChange={this.handleFieldsChange}
                />
              ))}
            </tbody>
          </table>

          <p className="submit">
            <input
              type="submit"
              name="submit"
              id="submit"
              className="buttonbutton-primarybutton-large"
              value="Submit"
            />
          </p>
        </form>
      </div>
    );
  }
}

Answer 1

nice to see you learning, great job, what you have is working! you are currently filtering your fields at the on change moment. That handleFieldsChange function is the place you have to understand what you are doing; first of all, I would rename it, because is just one field component changing being handled then what you have to think now is what you want to do when the user select the country, just try put something like this and you will be able to see more fields from the state to see what Im telling you:

handleFieldChange(name, value) {
if (name === "country" && value === "Brazil") {
  this.setState({
    fields: this.state.fields.map((field) =>
      { ...field, isShowing: true }
    )
  });
}

}