Update one of the objects in array, in an immutable way

by

You can use map to iterate the data and check for the fieldName, if fieldName is cityId then you need to change the value and return a new object otherwise just return the same object.

Write it like this:

var data = [
    {fieldName: 'title', valid: false}, 
    {fieldName: 'description', valid: true},
    {fieldName: 'cityId', valid: false},
    {fieldName: 'hostDescription', valid: false},
]

var newData = data.map(el => {
                  if(el.fieldName == 'cityId')
                     return Object.assign({}, el, {valid:true})
                  return el
              });

this.setState({ data: newData });

More Related Contents:

  1. setState doesn’t update the state immediately
  2. How to update nested state properties in React
  3. Unable to access React instance (this) inside event handler [duplicate]
  4. How to scroll to an element?
  5. When to use ES6 class based React components vs. functional ES6 React components?
  6. Why and when do we need to bind functions and eventHandlers in React?
  7. What does three dots do in ReactJS [duplicate]
  8. Correct way to push into state array
  9. Why is immutability so important (or needed) in JavaScript?
  10. How to add multiple classes to a ReactJS Component?
  11. React useState hook event handler using initial state
  12. Can I use arrow function in constructor of a react component?
  13. ES6 array map doesn’t return anything: ReactJS
  14. setState() inside of componentDidUpdate()
  15. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  16. Why React Hook useState uses const and not let
  17. where is create-react-app webpack config and files?
  18. Unable to use Arrow functions inside React component class [duplicate]
  19. Best way to polyfill ES6 features in React app that uses create-react-app
  20. Importing multiple files in react
  21. React.createClass vs. ES6 arrow function
  22. How do you import a javascript package from a cdn/script tag in React?
  23. React.js ES6 avoid binding ‘this’ to every method
  24. What do curly braces mean in JSX (React)?
  25. Replace element at specific position in an array without mutating it
  26. How to namespace es6 classes (for React components)
  27. React functional component default props vs default parameters
  28. Exporting functions with reactjs and babel
  29. Deep nested array of objects not rendering
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment