4

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.

Andrew Grimm
  • 70,470
  • 47
  • 186
  • 310
  • That's due to the immutability concept in React. You should not "edit" an existing object, but rather set it as a new one to trigger render() and related events. – turtlepick Nov 06 '18 at 00:38
  • @turtlepick If that's the case, can you explain why it'd allow you to edit the strings within the object? – Andrew Grimm Nov 06 '18 at 01:26

0 Answers0