How to View React State and Props

Building Web apps in ReactJS requires complete visualization of state and props while the application is being used. Here’s a complete solution for Chrome and Firefox users.

React Developer Tools

You can add React Developer Tools to your browser as an extension or add-on for this purpose.

Chrome users can simply go to the Chrome Web Store and add RDT as an extension. Firefox users can go to the Firefox Add-ons page and install React Developer Tools.

Auditing React Components

1. Open your app and inspect the page by pressing (Command+Option+I) or (ctrl+f12) to access the console window.
2. Select React Developer Tools.

3. Inspect each component to see its state and props.

Modifying the State

You can modify the state by clicking on the state attribute in the React tab and editing them. The DOM will re-render, passing the state down through the props.