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.
Source: stackoverflow.com
Related Query
- Formik form template for xml document creation
- Yup validation for nested form elements in formik
- Nested dynamic form creation - State shared for dynamic added fields
- Cannot get validation only to fire for Antd form with Formik - errored fields only show when actually trying to submit
- How to scroll to top of the page when using Formik and Formik-Stepper for a multistep form
- What are the typings for multi-page or multi-step formik form with React Hooks?
- How to add validations for formik form with material UI
- Formik / Yup Validation for Register Form on React
- How to generate unique IDs for form labels in React?
- Listen to keypress for document in reactjs
- React Formik - Trigger validation only on form submit
- Formik - How to reset form after confirmation
- React formik form validation: How to initially have submit button disabled
- React-datepicker with a Formik form
- Best practice for ReactJS form components
- Formik & yup form validation not working as expected with VirtualizedSelect
- Simulate keydown on document for JEST unit testing
- React with Firebase - submitting Formik form data
- How to pass values from a component into Formik multi-step form wizard?
- reactjs - Formik form does not fire submit on return key press
- How to dynamically show hide Formik form field depending on another form field
- Reactjs: Using same form for add and update
- How to connect simple Formik form with Redux store and dispatch an action?
- How to handle form state with Formik and Redux-Saga
- Why does hot reloading not work for reactjs visual studio 2019 template
- How do I turn on the webview autocomplete for an login form in Ionic's capacitor in iOS?
- Formik + Yup: How to immediately validate form before submit?
- How to reset form in formik using enableReinitialize?
- How to reset / empty form after submit in Formik
- Handling formik form when validation error occurs
More Query from same tag
- how to add dynamic css in react js
- How to prevent multiple looped outputs from being called all at once in React?
- React custom mount hook
- How to fix "Error: Reducers may not dispatch actions." in my ReactJS Redux app?
- React wont be loaded with Webpack 5, but in 4
- How to pass a props from one screen to another and display it?
- How can i implement roles/permission based crud routing on react?
- How to use object spread with nested properties?
- Get Electron production window to load a route with loadURL?
- ReactJS i18n library implementation problem
- Where should I set state if I can't do it in my render
- What does the bracket mean in this situation in React?
- How do I manage mysql query errors from express in a React form?
- React JS - JSX returns [object Object] instead of string
- Prevent image from rerendering at every state change - React
- ReactJS Link tag - Uncaught ReferenceError: Link is not defined
- How to iterate over JS array to create even cols in a row
- When a variable is updating in reactjs, And how to force the update
- React - How do you call a function from inside another function
- Check if the function is triggered in ReactJS
- Currently unable to display svg images from API in React app
- Filtering items with dropdown in react
- Removing li items with Button onClick
- Update parent state based on props and onClick from child in React
- integrate stripe js in react withnode
- Remove warning on captcha using reactjs
- Jest - Unexpected token import
- what does this useState function do and how?
- Creating a scroll position indicator in React
- React: Pass `this` to onClick with multiple functions