score:1
your question is a little confusing but it sounds like you want to have a form with dynamic number of rows. each row with a fixed number of inputs.
you can keep your state in a single array of objects, mapping over the array to render each row of inputs.
the input onchange handler will pass the array index and the event to a function.
you can get the value and input name from the event, which (along with the array index) is enough information to set the new state.
import { usestate } from "react";
export default function app() {
const emptyreview = {
reviewer: "",
review: ""
};
const [results, setresults] = usestate([{ ... emptyreview }]);
const onchange = (i, e) => {
const { value, name } = e.currenttarget;
const newresults = [...results];
newresults[i] = {
...newresults[i],
[name]: value
};
setresults(newresults);
};
const addreview = () => {
const newresults = [...results, { ... emptyreview }];
setresults(newresults);
};
return (
<div classname="app">
{results.map((result, i) => (
<div key={i}>
<div>
<label>
reviewer:
<input
value={result.reviewer}
name="reviewer"
onchange={(e) => onchange(i, e)}
/>
</label>
</div>
<div>
<label>
review:
<input
value={result.review}
name="review"
onchange={(e) => onchange(i, e)}
/>
</label>
</div>
<hr />
</div>
))}
<button onclick={addreview}>new review</button>
<pre>{json.stringify(results)}</pre>
</div>
);
}
bonus. if the inputs are just the same text input and label repeated, you could even map over the keys of the object from within the outer map. that way if you ever need to add extra fields, you would just do it in one place - the emptyreview
object.
{results.map((row, i) => (
<div key={i} classname="row">
{object.keys(row).map((key) => (
<label key={key}>
{key}
<input
value={row[key]}
name={key}
onchange={(e) => onchange(i, e)}
/>
</label>
))}
</div>
))}
Source: stackoverflow.com
Related Query
- Mapping form submissions to an array
- React native mapping through array with object childs - working different as in react web?
- React hook form - Field Array inside Dialog (Material UI)
- RxJS and React multiple clicked elements to form single data array
- How to specify a key for React children when mapping over an array
- Redux Form Field Array Validation
- Unexpected token (,) when mapping an array in ReactJS
- mapping an array of objects and changing the value with on onClick in React
- Dynamically mapping an array of objects to table row
- Redux Form Disable Enter button on field Array
- How to create an image background fade when mapping an array of images with React
- Best practice for mapping an array in React app for performance optimization
- Generate options by mapping over array of objects with react-select
- React array of components not mapping
- React - mapping through array of images
- How to target single item in list with onClick when mapping JSON array in React
- How to form an array of nested arrays in my specific case?
- Mapping Object Array Data in Redux
- Mapping an index from an array of strings
- how to show every part of array in different form in react component
- show dynamic select items mapping over array of objects
- Mapping Over an Array onClick Button in React
- TypeScript/React - Mapping over av array of objects
- Render a button (when hovered) for only one element of an array, when mapping an array
- Typescript recursively mapping object property types: object and array element types
- React hook form - populate select many options array
- mapping and filtering an array of objects with key
- Array display in a specific format in javascript with mapping
- reactjs; after mapping an array nothing renders
- React: Each child in an array or iterator should have a unique "key" prop when Mapping custom components
More Query from same tag
- Adding multiple line break in react-markdown
- React Hooks: How to clean event listeners?
- how can I set user-level in MenuItem?
- How to load a React.Component from a CDN and render into another React.Component
- How to display different tooltip text while mapping over a list?
- GatsbyJS: How do I load a component synchronously at build time, but asynchronously at runtime?
- Rendering a Constant Inside of a React Class Component
- React router error "TypeError: Object(...) is not a function"
- React Js TypeError: Cannot read property 'LoginAuth' of undefined
- "ReferenceError: Strophe is not defined" when using Quickblox in React
- How to convert token JWT to object in reactjs
- How to get multiple checkboxes value
- Webpack export all components without redundancy
- React recursion with map does not work for the nested elements
- destructuring multiple times for the same object property
- how to iterate information in the state in React
- How to handle erros with redux saga
- Clear form after using addDoc in react
- What is the purpose of an Array.prototype.map() invocation with an arrow function with two inputs?
- React SPA / Embedded Identity Server issue after .net core 3 preview 8 upgrade
- How to use one vendor chunk file (webpack) for multiple react projects
- checked/uncheck the value of material ui checkbox based on data(hooks) that returns Y(true/checked) react js
- Transition to another route on successful async redux action
- Immutable.js relationships
- Not getting the single product data from products.js while using express
- how to keep session enabled in firebase/auth js?
- Allow google analytics to load only after consented in Next.js
- how to compare state variables of 2 components in react?
- React - Wrong component rendering after calling history.push
- UseEffect without second parameter Vs not using useEffect