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

  1. Open your app and inspect the page with developer tools (Command+Option+I).

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! :)

Computer science graduate 2021. 1 year technology placement in investment banking. Full stack:ReactJS, JavaScript, NodeJS,Flask,SQL, AWS Crypto enthusiast