How to see your React state & props in the browser
Accessing your State attributes in React can be confusing at times. I recently found myself in a bit of a pickle and discovered React Developer Tools extension. This allows you to see the state or props of components in real-time!
React Developer Tools
Install the React Developer Tools extension for Chrome or FireFox. It allows you to inspect React component hierarchies within the developer tools — the same way you would peek at the DOM elements, console, or network.
Inspecting React Components
- Open your app and inspect the page with developer tools (Command+Option+I).
- Select the React Developer Tools
3. Pick a component in the tree to see its state and current props.
You can also select a React element directly from the page by hovering over it with the selection tool:
Modifying the State
If you want to update your state in the browser — you can! Modify it by clicking and editing state attributes in the React tab. This will re-render the DOM, passing the state down through the props.
Good luck! :)
