score:1
probably you can solve this using an array of objects inside your state and latter assessing to the values. i'm not sure what do you want to do, but if you want to create an app that generates dynamically inputs and after set the values in the corresponding state, you can do something like this.
export default function dinamiclinks() {
const [quantity, setquantity] = usestate(0)
const [messages, setmessages] = usestate([])
const createinputs = (quantity) => {
const params = []
for (let i = 1; i <= quantity; i++){
let param = {name:i};
params.push(param)
}
return params
}
const handlemessages = (passedmessage) => {
const filteredmessages = messages.filter((message) => message.name !== passedmessage.name)
setmessages([...filteredmessages, passedmessage])
}
return (
<div classname="app">
<button onclick={() => setquantity(quantity + 1)}>more inputs</button>
<button onclick={() => setquantity(quantity - 1)}>less inputs</button>
{createinputs(quantity).map(({name}) => <input key={name} onchange={(e) => handlemessages({name, message:e.currenttarget.value})}></input>)}
<button onclick={() => console.log(messages)}>see messages</button>
</div>
);
}
this code will go to generate inputs dynamically and will go to store his values inside an state, that store objects inside an array, later you can implement the logic to handle the text in the way you whatever you want. by the way, this code isn't the best in performance, but i want to give you and easy solution quickly. undoubtedly there are better ways to do this, and also is valid to mention, don't abuse the arrow functions like i did in this example, are an easy ways to have trouble of performance in react.
Source: stackoverflow.com
Related Query
- Handling form with single state in React for web app
- React Functional components Form handling with object in state
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- React w/ TypeScript: why is the type for the state lost when useState with a callback as the updater
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- Using Jquery and Bootstrap with Es6 Import for React App
- Real time react web app with pusher and laravel
- Form created with React doesn't update the backing state object
- React js - problem with proxy for web socket link in react
- ReactJS - How can I implement pagination for react with keep state when route change?
- Sync queryParameters with Redux state and react router for function components
- How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?
- How can ı pass function with state for react useContext
- React Native Inline style for multiple Text in single Text With Touch effect
- React - Ant Design, Form with getFieldDecorator and initialValue not working in single chechbox
- How to apply react-native-linear-gradient for the entire app background with React Native
- setup localStorage for testing React app with jest
- Unable to track time spent on React web app with Google Analytics
- Handling Large Form with React
- Detect browser's language with i18next-browser-languagedetector for reactJs web app
- A/B testing for React SSR app with chunking
- React CSSTransition For a single image with a changing [src] value?
- How to set key/value default state for TypeScript React app
- how to calculate default value for react js state hook with a function?
- sec_error_inadequate_key_usage in firefox for react app with https=true & host=yyy
- Serving a static html page from a single page react app with react router
- using state value in state data for apex charts within react app
- How to declare different state and props for subclasses on react with typescript
- React - setting state to display a message for validation errors in form leads to :Cannot read property 'setState' of undefined - Why?
- How to change cache polilcy for static assets in React app (created with create-react-app)
More Query from same tag
- How to make a child React component show for a certain amount of time?
- How can I call React useRef conditionally in a Portal wrapper and have better code?
- "Cannot read property 'map' of undefined" when trying to map out state and pass it as props into component
- Do React hooks need to return a value?
- How to target a styled component inside another styled component?
- How to run nrwl/nx production build of web app on localhost (NextJS)
- Bootstrap + react-bootstrap form elements, styling not applied
- Custom useForm Hook does not update field value
- How to add a permanent filter function to a List view in react-admin?
- Dynamically import images from a directory using webpack
- How can I return a array with React Components?
- Using leaflet and need to update component. How can I update the values in my constructor?
- How to convert XMLHttpRequest to Fetch?
- How does the child component receive props from the parent component without listening for the lifecycle method?
- Navigation menu not working in React
- How is Facebook able to show a custom modal window for unsaved changes in their application?
- React Data Grid rows disappearing on dynamically providing height
- Redux-React passing an object via the mapDispatchToProps method
- edit todo list state not passed correctly in react with axios
- Fluid images in .mdx file
- Authenticate async with react-router-v4
- Material Table refreshes instead of appending onRowAdd
- react-router-dom v ^5.2.0 Routes troubleshooting
- snowpack Package "abstracts/variables" not found. Have you installed it? getting this error while running npm start
- Redux store returns null value in React class component
- React - user login and token validation
- React Router doesn't access Protected Route
- React Functional Component: Immediately calling getElementById returns null
- yarn build:styles error in react while adding tailwind css
- Why I get "Cannot read properties of undefined (reading 'map')" in React, while there is no syntax error