Is it possible to use dynamic object keys in useState in Reactjs?

Question

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 }
            ]
        )
    }

Golden

Answer 1

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>

Belfry

Answer 2

yes you can, but you need to use [] to make it a Computed property name

it should be:

        setHoras({
            ...horas,
            [nomb]: e.target.value
        })

Starr

Answer 3

I assume you are looking for dynamic object keys? If yes - with ES6 you could use { [key]: value } syntax

Sidhu

Answer 4

To me the nicest and super easy to use and understand is implementing the es6 Map object that holds key-value pairs.

const [samplesMap, setSamplesMap] = useState(new Map<string, boolean>());

//Helper function to allow React to trigger a render.
//The value can be any value of course
const updateSamplesMap = (sample: string, val: boolean) => {
    setSamplesMap(new Map(samplesMap.set(cat, val)));
}

//Dynamically update the object.
updateSamplesMap("sample", true);

//Get the wanted element value.
samplesMap.get("sample");

For more info about Map object: click here

Laminous