reactjs


react-addons-update - How to insert an object deep within array of objects?


I am using the react-addons-update npm package with my React application and specifically want to use the update() method for inserting an new object deep within an array of objects.
I have this structure as part of my component state:
...
constructor(props) {
super(props);
this.state = {
blocks: [
{
block_title: "some title",
items: [
{
item_title: "foo"
},
{
item_title: "bar"
}
]
},
{
...
}
]
};
}
...
and I want to insert a new item into the items array, between the first and second item.
I have tried this:
...
insertItem(){
let obj = {
item_title: "in between foo and bar"
};
this.setState({
blocks: update(this.state.blocks, {
[0]: {
items: {$splice: [[1, 0, obj]]}
}
})
});
}
...
but this does not seem to be working (no errors are being thrown either). Any ideas?
p.s. I am using React within a Meteor application - just in case there is some quirk that prevents this helper function from working .
Can't see your other methods in the component, but try making sure key prop on the element you render for the added items is there and unique.
As per goldbullet's comment, setState updates the components state asynchronously. I discovered that a process that ran subsequent to setState in the code block was actually getting the components state before it had been updated. Therefore, the above syntax in the original question is correct for inserting an object deep within an array of objects.
As a solution, I used the setState callback option as below:
...
insertItem(){
let obj = {
item_title: "in between foo and bar"
};
this.setState({
blocks: update(this.state.blocks, {
[0]: {
items: {$splice: [[1, 0, obj]]}
}
})
},function(){
// DO SOMETHING HERE!!
});
}
...
This was also mentioned in this post Why calling react setState method doesn't mutate the state immediately?

Related Links

How do I Make and Use React components?
React-Router V4 - server rendering works only on one machine
Redux Form can't fill initialValues
How to reduce webpack bundle in development mode?
onScroll not getting triggered on container in React
Warning: Failed prop type: Game: prop type `game` is invalid; it must be a function, usually from React.PropTypes
issue hosting on firebase with React-Redux app?
How to convey error information through Relay render when the response includes errors and data?
Unable to trigger Redux action after ajax
React native iOS open message app with default text
How to make synchronous API call request in react js
ReactJS: Turn object into array and render
redux-form - Register all fields from state
how to map values in material ui auto-complete
handle change event not working for input types?
Redux passing down actions

Categories

HOME
excel-formula
optimization
qemu
cluster-analysis
wifi
blob
x86-64
boxplot
localhost
collision-detection
jpql
angular-universal
core-data
email-attachments
mongodb-replica-set
tmux
eclipse-orion
minimum
popup
loss
jquery-easyui
views
loader
printf
caldav
hl7-fhir
typedef
smali
ecmascript-2017
custom-fields
hierarchy
recreate
2checkout
tikz
urhosharp
epub
motherboard
oracle-bpm-suite
jslider
blueimp
ui-grid
jvisualvm
runner
opos
nao-robot
ng-class
noise
jcs
aws-rds
totalview
reloaddata
trusted-computing
class-design
foreground
avi
usps
treelist
periodic-processing
factorization
wizard
dcast
hana-sql-script
jsondoc
jain-sip
tess4j
euro
waterline
radgrid
chrome-mobile
static-files
pysvn
cordova-3
iphone-6
grunt-contrib-connect
serializer
msdropdown
switchpreference
episerver-7
rda
mencoder
kohana-orm
angularjs-select2
xrandr
proj4
urlfetch
moonscript
screensharing
invalidoperationexception
orchestration
wpml
aspmenu-control
optimistic-concurrency
motorola-droid
peoplepicker

Resources

Encrypt Message