score:0
assuming response
contains the first array in your op:
getorders(orders).then(response => {
const openedorders = response.map(order => ({ ...order, open: true}))
this.setstate({ openedorders } )
})
response.map(order => ({ ...order, open: true})
adds a key open
with the value true
to every order
in the array.
score:0
to add dynamic keys to a object in javascript we use [].
var x = [{ _id : 1, name: suzuki}];
x[0]['opened'] = true;
console.log(x);
// [{ _id : 1, name: suzuki, opened: true}];
score:0
use foreach()
to loop through all the orders in the array and add the desired property for each order.
let orders = [{
_id: 1,
name: 'honda',
}, {
_id: 2,
name: 'suzuki',
}, {
_id: 3,
name: 'audi',
}]
orders.foreach(o => o.opened = true)
console.log(orders)
score:0
you could add a new property to the objects.
var orders = [{ _id: 1, name: 'honda' }, { _id: 2, name: 'suzuki' }, { _id: 3, name: 'audi' }],
additionalprop = { opened: true };
orders.foreach(o => object.assign(o, additionalprop));
console.log(orders);
.as-console-wrapper { max-height: 100% !important; top: 0; }
or map a new array without mutating the original objects.
var orders = [{ _id: 1, name: 'honda' }, { _id: 2, name: 'suzuki' }, { _id: 3, name: 'audi' }],
additionalprop = { opened: true },
result = orders.map(o => object.assign({}, o, additionalprop));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
score:2
your map should look like this. (note the return statement in map function)
orders.map(item=> {
return {...item, opened:true}
})
so your function could look like
getorders(orders).then(response => {
let openedorders = orders.map(item=> {
return {...item, opened:true}
})
this.setstate({
openedorders
})
})
Source: stackoverflow.com
Related Query
- React How to add new dynamic key to existing state?
- How to add a new key value to react js state array?
- How can I add new a new object with key and values pairs to the existing state in class based component?
- How to add new object into existing state using react and redux saga
- How add new object property while updating state in React
- how to add new property to react useContext state
- How to set an an object with a dynamic key as React state in Typescript
- How to add new child key-value to a React State object
- How to add new Properties to File object in React with state value dynamically
- React | How to add dynamic new divs like rows
- how can i add setinterval function inside React new array state
- How to modify an array and add new element to array state on react
- How to add new elements without re-rendering whole list with React
- Get state value by a dynamic key in react
- Set dynamic key in state via useState React hooks
- How do I add an item to the front of a state array in React
- How to keep React new Context API state when routing between Components?
- In React how to add key prop to element passed as Object
- Get react state with dynamic key
- How to add to state array in React
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How to Add React Js On an Existing Website?
- How to add dynamic code inside of a React Router Link component
- How to add React components to existing Django project
- how to add dynamic css in react js
- How to add new props dynamically to the component using navigator in React Native
- How to add dynamic TailwindCSS classes to DOM elements in React
- How can I add computed state to graph objects in React Apollo?
- How to add es2020 features to existing react app?
- How to add dynamic content to React Material UI expansion panels whilst keeping only one active tab at at time functionality
More Query from same tag
- How to check if else conditions containing window.location.href (React Component) using Jest
- React/Context related question: How to have multiple variables within provider value? I'm using functional components
- React.props.children is undefined
- Next.js site has favicon in chrome but not in brave
- How to re-render component with react hooks
- Reactjs Date Picker
- Updating a list in React.js based on whether a new element was added or existing was edited
- How can I set a different color for text and background of canvas HTML?
- How do I catch and parse errors properly in my React form submission handler?
- (concurrently not found) trying to deploy a PERN app to Heroku
- How to use conditionals in React with CssModules
- Is it possible do multiple proptype type checks in ReactJS
- Property does not exist on type 'never' on JSON array
- Next.js Vanilla JS script won't run on deployment
- Deleting dropdown options leaves the last option visible
- Clear TextInput onPress()
- Annoying React Error... "TypeError: Cannot read property 'My_Items' of null"
- how to fix 'keypress with enter key with a checkbox in react js'
- React re-render after login -- and after an asynchronous call
- React need to click twice to render data fetched from api
- Adding element to Active NavLink React
- How to reset a result state to its initial value in react hook
- Adding new page to reactjs template
- GraphQL mutation: Invariant Violation: Must contain a query definition
- Where is the logic of react hooks?
- How to preserve state value after re-running setState
- How to show fetched data in input box as a dropdown and handle it?
- Reactjs Filtering a huge array of objects best practices
- React w/ Redux/React-Redux and Redux-Persist only persisting first change to local storage
- How to do the handle authentication in React Router?