I'm trying to get the data from a form in which some fields are dynamic so that their names follow a pattern like the days of the week ending in 1 or 2.
In the onChange
I send the name of the component that I am editing so the program knows what input is being edited but when I use the name that I send by parameter in the useState
it does not detect it as the variable but as a normal string.
const [horas, setHoras] = useState({});
const handleHoras = (e: any, nomb: string) => {
setHoras({
...horas,
nomb: e.target.value
})
}
I've tried to declare the state as an array (as I show below) but the variable is not overwriting itself but adding variables with the same name every time the value changes.
const handleHoras = (e: any, nomb: any) => {
setHoras(
[
...horas,
{ 'name': nomb, 'value': e.target.value }
]
)
}
Use the target
prop of the callback function to get name and value, and do not forget to add [ ]
around the name to make it dynamic.
// import { useState } from 'react' --> with babel import
const { useState } = React // --> with inline script tag
const App = () => {
const [inputValues, setInputValues] = useState({})
const handleChange = ({ target }) => {
setInputValues(prevInputValues => ({
...prevInputValues,
[target.id]: target.value
}))
}
console.log('state:', inputValues)
return (
<form>
<input id="foo" onChange={handleChange} />
<input id="bar" onChange={handleChange} />
</form>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>