score:0
Accepted answer
find the below code.
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;
check the codesandbox link here
score:1
in the fields array, you can add one more key isvisible.
it will look like this:
fields = [
{
firstname: 'john',
lastname: 'doe',
isvisible: true,
},
{
firstname: 'jane',
lastname: 'doe',
isvisible: false,
}
];
now while showing, only render the field when isvisible is 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>
you can control isvisible key by clicking cust # button.
Source: stackoverflow.com
Related Query
- Add multiple form fields but show only one at a time
- Trying to add multiple images in react , but it only displays one image
- How to add dynamic content to React Material UI expansion panels whilst keeping only one active tab at at time functionality
- show - hide component with hook function works only one time
- Calling one hook multiple times but running logic inside it only once for given render phase
- Error: Multiple children were passed to <Link> with `href` of `/posts` but only one child is supported
- How to show only one active item at a time with react and material ui
- Only show Popup one time with React (local storage)
- React multiple useState hooks but only one of the setter functions work (and useEffect doesn't work at all)
- Framer animation using react intersection observer. Need multiple animations but get only one
- How to expand and collapse the table rows in plain react js. Show only one row if the description of the row is multiple and show the expand button
- bootstrap-select is used in multiple places in one page but only working for the first one
- Show only one form field on Edit select in iteration with React and Semantic-UI-React?
- Multiple dropdowns in ReactJS, only one open at a time
- I want to play multiple audio files. So I created a function for it. But it can only play one audio.. How can I make it?
- Reactjs - Isotope - expand and collapse on click - but have ONLY one item at a time
- How I can add multiple same fields form in reactJS?
- React TypeScript: Multiple State updates but only first one gets applied
- Cannot get validation only to fire for Antd form with Formik - errored fields only show when actually trying to submit
- Only One form working at a time in react
- I have an <Add /> component that is called in two different pages, but only one of them is receiving the add count prop passed to it in React JS
- How to setup form with multiple Checkboxes which only one can be "checked" with Material-UI components?
- Show only an attribute, but save entire object (React Final Form + Downshift)
- Trying to show only one form
- I'm trying to pack several files into an array, but only one is shown at a time
- React multiple select form saving only one option to array
- React useEffect Hook when only one of the effect's deps changes, but not the others
- React: dynamically add input fields to form
- React form with multiple buttons - how to choose one to handle onSubmit event?
- React and Multiple form fields
More Query from same tag
- React: "this" is undefined inside a component function
- Webpack how to ignore the imported files
- Can I make multiple useMutation in a components
- Reactjs Static and Dynamic Routes
- What is the correct type for React Click Event?
- React Setstate makes my state item undefined after JSONizing it
- Setting params on useEffect and getting the params it on createStackNav in React Navigation 5
- Flow-type check for styles in JSX
- Enzyme Jest window.getSelection() does not work
- Firebase auth and React Hook - returning function from hook not working
- How to apply margin between Material-UI Grid items?
- How to force Gatsby to redirect a specific URL path to an external site?
- react-router-dom, component not rendering but only <App> shows instead
- Add newline return or linebreak to string (Typescript & React)
- React Component: updating components, based on another component with no relation
- material-table edit/delete button change action
- Recharts issue with gaps between Bars
- How to toggle class on onclick in map function?
- React Flip-Card bug on the back of card
- Routing issue: this.context.router not defined when trying to re-route
- Redirect in Reat JS
- How to integrate Reactjs frontend with php codeigniter application on apache server?
- React/Next JS import custom library
- Docker container does not communicate with others in same docker network(bridge)
- Error passing data to display table information using Material-ui
- Create react app, reload not working
- Filter through JSON data to create a filter based on the location of the job
- How to make image clickable and redirect to its introduction value page in Reactjs
- React router v4 inner page (javascript)
- Console log inside React 'useEffect' function doesn't work after page refresh