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.
It appears that React DevTools locks out functionality based on whether the page you're looking at is using the "development build of React" or the "production build of React".
I'm currently trying to debug something between my local (development) version of an app and the deployed (production) version of the same app. To test something in the deployed (production) version, it would be helpful if I could open React DevTools, click into the component, and edit a prop. Alas, as far as I can tell, there is absolutely no way to edit one of the props in that production build version of the website via React DevTools.
Contrast that with my local (development) version. I can click into any component in React DevTools, then edit any props (or state) I want and the component immediately renders with the new prop value. That appears pretty easy and straightforward: just double-click what you want to edit and type away.
TL;DR: Certain prop/state editing features of React DevTools appear to be locked down depending on the React build version. If you're not sure which version you're looking at, see the link above. If you need to edit props on something that's a deployed, production build of React, you (probably*) can't. Aggravating, but I feel your pain.
[*Probably because A) I might be wrong (that would be great, someone please comment how to do it), it's not very clear in the first place about when it's editable vs not editable; B) If you could somehow trick the React DevTools into treating the page like it's a development build, it might be possible (or it might break hideously), but checking that requires more effort than I can spare.]
Some editorializing:
I would love for the above to not be true, and it's especially aggravating because I don't see a reason why it's necessary. Perhaps I don't understand enough about the difference between the dev and prod versions, but you can still view props/state on a production version using the React DevTools: it doesn't seem like a big leap to be able to also edit it considering that the functionality is all there when it's a development version. But once again, maybe I don't see the reasons behind this.
Related
Can you See State variables in Production or are they private in the class and not viewable from outside?
According to the answer of this question: Disable chrome react DevTools for production you are able to disable the use of the react dev tools on your production site, however this would not absolutely stop the user from reading the state as they could always find & disable that line of code, or find some other way of accessing the state.
React runs entirely inside the user's browser, and because of this it is not possible to completely prevent the user from accessing the source code, or things like the state.
To view state, you will need to install React's Devtool
Then open your developer tool then switch to the component tab:
Find and click to your component that has a state, then you will see your state also your props on the right side:
You can use react devtools to inspect state and props of a component.
Yes, you can check them via something like React dev tools.
I'm using React 16.8.x and the latest version of the React DevTools. In some cases, I'm able to inspect and modify hooks like useState no problem. But in other cases, the hooks appear to be read only - I can't modify them from the dev tools. Clicking on them, there is no way to make any changes to their values.
Is there any rhyme or reason for why I can edit hooks from the dev tools sometimes but not others?
Anyone have any clue why my react component dev tools looks like this? Prior to the most recent react dev tools major update, I could see the names of all my components, but now it just looks like this.
Dev Tools View
You're using production/ minified version of the code. When such code is viewed in Devtool, you can only see single letter representation.
Make sure to run app in development mode and see if Devtool is picking up the right component name.
After refreshing the page (and going through my ssr) it looks like none of the css is sustained unless I navigate through my app and get back to it Or even click some elements. Are there any examples of how this is done correctly?
Im using the exact same code from the controlled 'react material ui grid' example:
https://github.com/kkotwal94/DrivingService (develop branch) <- where the component is under components / demoBase, and the SSR is under server/render/pageRender.jsx. I use the material ui example for how this is done. I utilize demo grid in Students.jsx.
Here is a pic of what happens post refresh:
Everything else renders fine (all other pages) in production mode and dev mode. I have no clue what im missing here. It looks like the jss-in-css is mapping incorrectly.
I found that reverting back to pre-React 16 everything began to work again SSR and what not, however i cant use dx-react-grid project since it requires 16. Kind of in a wackamole, still investigating where i goofed.
TEST
http://transportation.kkotwal.me/
I hosted it, if you click on login you can log in with yea#yea.com, password: 123, or you can just sign up where the username has to be a email it doesnt matter. After wards if you navigate to the students button on the navigation (if you click on transportation tracker after logging in you should be back to the root page / view). You will see the dev extreme controlled grid example.
If you hit refresh on that page you will see all the css is messed up. In case you arent sure what the page is: http://transportation.kkotwal.me/students. The source is here: https://github.com/kkotwal94/DrivingService/tree/UpdateReact . The server side rendering is located https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render. The component for the devExtreme component is called DemoBase.jsx in the components folder, and the container that renders this is https://github.com/kkotwal94/DrivingService/blob/UpdateReact/app/containers/students/Students.jsx.
I guess you're already aware that React 16 came with lots of improvements to server-side rendering. The update came with additional server-side render methods like renderToNodeStream().
The official guide on upgrading React from 15 to 16 mentions that it should have no issues, with minor exceptions. One of those exceptions is a break change exactly when you hydrate a server-rendered container:
Hydrating a server-rendered container now has an explicit API. If you’re reviving server-rendered HTML, use ReactDOM.hydrate instead of ReactDOM.render. Keep using ReactDOM.render if you’re just doing client-side rendering.
Having that in mind, I'd search in your project (and possibly in third-party libraries as well) for some ReactDOM.render that was missed to be changed to ReactDOM.hydrate while upgrading React to version 16.
this is probably the issue at server side code and your nodejs script.
Reason #1:
if you are using material ui version 4.x then you should look at their ssr documentation
in material ui version 3.x or below that we use
JssProvider from 'react jss/lib/JssProvider';
however this is no more required, your both github links are broken , kindly check ssr code of yours and compare it with material-ui documentation
Reason #2:
you have to refer to your build folder for your expressjs
app.use(express.static(path.join(__dirname, '../../build')));
app.use(express.static(path.join(__dirname, 'public')));
this could be another reason and if this is missing then check that your componentDidMount also will not be invoked, so client side rendering won't be happening, however for ssr both client side and server side rendering has to happen
For complete code on SSR kindly refer this link
Scenario:
I have a React component which shows up in one of the tabs on my website. Navigating to another tab in the same website unmounts the component and navigating back to the original tab renders the component again.
Problem:
The problem I'm facing is that the older React component still shows up in the React developer tools console and everytime I navigate back to the original tab, the number of components shown there increase by one.
My question is: Are the components not getting deleted and that there is another way to delete the component which I'm not doing or it is the behavior of React developer tools console to show earlier components?
I'll suggest to check the actual DOM, not what you see in the devtools. It is possible that there is a bug in devtools. The way of how React's devtools work is a little bit tricky. The communication between what happens in the page and the actual devtools ui depends on couple of factors. There is a content script, background script a bridge that they wrote and so on. If you see the components number growing in the DOM then the problem is not in the devtools but in your app.