score:1

Accepted answer

you can structure your data like so:

const initialvalues = {
  creators: [
    {
      creatorname: {
        value: "miller, elizabeth",
        nametype: "personal"
      },
      givenname: "elizabeth",
      familyname: "miller",
      nameidentifier: {
        value: "7",
        schemeuri: "organi.org/",
        nameidentifierscheme: "orc"
      },
      affiliation: "datacite"
    }
  ]
};

it shouldn't be too hard to see how you can relate each value and option to its own specific value using dot notation in the name field. you can use fieldarray to map over the creators array and generate a set of fields for each value and option, like in this example from the formik docs:

<form>
  <fieldarray
    name="friends"
    render={arrayhelpers => (
      <div>
        {values.friends.map((friend, index) => (
          <div key={index}>
            <field name={`friends[${index}].name`} />
            <field name={`friends.${index}.age`} /> {/* both these conventions do the same */}
            <button type="button" onclick={() => arrayhelpers.remove(index)}>
              -
            </button>
          </div>
        ))}
        <button
          type="button"
          onclick={() => arrayhelpers.push({ name: '', age: '' })}
        >
          +
        </button>
      </div>
    )}
  />
</form>

when you're parsing your object into xml, just use value for the value, and apply the other fields as properties.


Related Query

More Query from same tag