Добавить несколько полей формы, но показывать только по одному за раз

Question

Я нуждаюсь final-form чтобы иметь возможность добавлять массив записей полей формы. Но хочу отображать только одно поле массива за раз. Как на левой стороне у меня будет клиент id или же index какой пользователь выберет, и на правой стороне я должен показать клиенту, соответствующему этому index, Я могу добавить reac-final-form-array, но он всегда показывает все элементы массива. Какой должен быть правильный подход, чтобы показать только выбранный клиент.

Пожалуйста, проверьте код ниже для справки. Надеюсь, мой вопрос ясен, если нет, пожалуйста, дайте мне знать, добавит больше объяснений.

<FieldArray name="customer">
  {({ fields }) => (
    fields.map((name, index) => (
      <div key={index}>
        <Field name={`${name}.firstName`} />
        <Field name={`${name}.lastName`} />
      </div>
    ))
  )}
</FieldArray>

Чтобы добавить нового клиента:

<div className="buttons">
  <button
    type="button"
    onClick={() => push('customers', undefined)}>
    Add Customer
  </button>
</div>

В настоящее время это выглядит так:

Мне нужно, чтобы это выглядело так:

Answer 1

В массиве fields вы можете добавить еще один ключ isVisible.

Это будет выглядеть так:

fields = [
    {
        firstName: 'John',
        lastName: 'Doe',
        isVisible: true,
    },
    {
        firstName: 'Jane',
        lastName: 'Doe',
        isVisible: false,
    }
];

Теперь при отображении отображать поле только тогда, когда isVisible имеет значение true,

<FieldArray name="customer">
  {({ fields }) => (
    fields.map((name, index) => {
      if(name.isVisible){
        return (
          <div key={index}>
            <Field name={`${name}.firstName`} />
            <Field name={`${name}.lastName`} />
          </div>
      );
    ))
  )}
</FieldArray>

Вы можете управлять ключом isVisible, нажав кнопку Cust #.

Answer 2

Найдите код ниже.

import React from "react";
import { Form, Field } from "react-final-form";
import arrayMutators from "final-form-arrays";
import { FieldArray } from "react-final-form-arrays";

const onSubmit = () => {
  console.log("submitted");
};

const validate = () => {
  // console.log("validated");
};

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    mutators={{
      // potentially other mutators could be merged here
      ...arrayMutators
    }}
    validate={validate}
    render={({ handleSubmit, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <FieldArray name="customers">
          {({ fields }) => (
            <div>
              <button
                type="button"
                onClick={() =>
                  fields.push({ firstName: "", lastName: "", isVisible: true })
                }
              >
                Add Customer
              </button>
              {fields.map((name, index) => (
                <div key={name}>
                  <a
                    onClick={() =>
                      (fields.value[index].isVisible = !fields.value[index]
                        .isVisible)
                    }
                  >{`Cust #${index}`}</a>
                  {fields.value[index].isVisible ? (
                    <div>
                      <div>
                        <Field name={`${name}.firstName`} component="input" />
                      </div>
                      <div>
                        <Field name={`${name}.lastName`} component="input" />
                      </div>
                    </div>
                  ) : null}
                  <button type="button" onClick={() => fields.remove(index)}>
                    Remove
                  </button>
                </div>
              ))}
            </div>
          )}
        </FieldArray>
      </form>
    )}
  />
);

export default MyForm;

Проверьте коды и ссылку здесь