I've got a component which consists of an object, which contains an array of objects, which in turn has keys and strings
this.state = {
dinosaurs: [
{ era: "jurassic", name: "diplodocus", diet: "herbivore" },
{ era: "cretaceous", name: "velociraptor", diet: "carnivore" },
]
}
When I open up the component in react devtools, I find I can edit the strings such as "jurassic"
or "diplodocus"
by double clicking on those strings, but I apparently can't make changes to the keys such as "era", or the array of dinosaurs. However, it could be possible to change it with React DevTools but I'm doing it incorrectly.
I'm using React DevTools within Google DevTools.
What can and can't I change in a component's state using React DevTools?
I tried looking at the GitHub readme, and I can see a mention of editing state in the section side pane, but no mention of what can and can't be edited.
I looked at How to set React component state and props from browser but there was a comment telling the user to read the friendly manual for React DevTools, plus answers that didn't address what is or isn't possible using React DevTools.