react setState with dynamic key

by

Basic rule is:

We can use Computed property names concept and use any js expression to compute the object property name dynamically. For that we need to put the expression inside [].

Like this:

var obj = {
   [10 * 20 + 1 - 5]: "Hello"
};

console.log('obj = ', obj);

Solution:

As per the code you posted, you need to put e.target.id inside [], like this:

onChange(e) {
    this.setState({
      [e.target.id]: e.target.value
    })
}

Or we can create that object first, then pass that object to setState function, like this:

onChange(e) {
    let obj = {};
    obj[e.target.id] = e.target.value
    this.setState(obj);
}

Also you don’t need the prevState. You can directly update the state variable with new value.prevState is required only when new state value is dependent on previous state value, like in case of counter.

More Related Contents:

  1. When to use React setState callback
  2. How can I persist redux state tree on refresh?
  3. How to use callback with useState hook in react [duplicate]
  4. Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
  5. ReactJS: Why is passing the component initial state a prop an anti-pattern?
  6. Why, exactly, do we need React.forwardRef?
  7. You should not use outside a
  8. How to set default Checked in checkbox ReactJS?
  9. Differences between creating a new class to using export const
  10. How to deploy a Flask+React application to Azure Web Service
  11. How to allow only numbers in textbox in reactjs?
  12. Invariant failed: You should not use outside a
  13. How to unmount, unrender or remove a component, from itself in a React/Redux/Typescript notification message
  14. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  15. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  16. React: Which is recommended arrow or normal function?
  17. When specified, “proxy” in package.json must be a string
  18. Is it safe to use ref.current as useEffect’s dependency when ref points to a DOM element?
  19. Lazy initial state – What it is and how to use it?
  20. What is the best way to trigger change or input event in react js from jQuery or plain JavaScript
  21. React and Tailwind CSS: dynamically generated classes are not being applied
  22. Create-React-App Proxy in Production Build
  23. how to change jest mock function return value in each test?
  24. how to async/await redux-thunk actions?
  25. ReactJS – prevState in the new useState React hook?
  26. You cannot render a inside another . You should never have more than one in your app
  27. React – Is useState ‘s setter function able to change?
  28. How to go back to previous route in react-router-dom v6
  29. React – “localStorage is not defined” error showing
  30. Is it possible to return empty in react render function?

Leave a Comment