React follows a declarative paradigm so it helps to have tooling in place like React Developer Tools that lets you see your JSX markup in the browser. This is only the static aspect of your React app—you declare the elements of your UI and let data control the rest. Using the same tool, you can watch props and state as they flow through your app. To demonstrate this, let's create a simple list that fills itself up once mounted:

import React, { Component } from 'react'; 
import MyItem from './MyItem'; 
 
class MyList extends Component { 
  timer = null; 
  state = { items: [] };
  componentDidMount() { 
    this.timer = setInterval(() => { 
      if (this.state.items.length === 10) { 
        clearInterval(this.timer); 
        return; 
      } 
 
      this.setState(state => ({ 
        ...state, 
        items: [ 
          ...state.items, 
          { 
            label: 'Item ${state.items.length + 1}', 
            strikethrough: false 
          } 
        ] 
      })); 
    }, 3000); 
  } 
 
  componentWillUnmount() { 
    clearInterval(this.timer); 
  } 
 
  onItemClick = index => () => { 
    this.setState(state => ({ 
      ...state, 
      items: state.items.map( 
        (v, i) => 
          index === i 
            ? { 
                ...v, 
                strikethrough: !v.strikethrough 
              } 
            : v 
      ) 
    })); 
  }; 
 
  render() { 
    return ( 
      <ul> 
        {this.state.items.map((v, i) => ( 
          <MyItem 
            key={i} 
            label={v.label} 
            strikethrough={v.strikethrough} 
            onClick={this.onItemClick(i)}

          /> 
        ))} 
      </ul> 
    ); 
  } 
} 
 
export default MyList; 

Here's a rough breakdown of everything that this component does:

• timer and state: These properties are initialized. The main state of this component is an items array.
• componentDidMount(): Sets up an interval timer that adds a new value to the items array every three seconds. Once there are ten items, the interval is cleared.
• componentWillUnmount(): Makes sure the timer property is forcefully cleared.

• onItemClick(): Takes an index argument and returns an event handler for the index. When the handler is called, the strikethrough state is toggled.
• render(): Renders a <ul> list of <MyItem> elements, passing it relevant props.

The idea here is to slowly build the list so that you can watch the state changes happen in the browser tooling. Then, with the MyList elements, you can watch the props that are passed to it. Here's what this component looks like:

import React from 'react'; 
 
const MyItem = ({ label, strikethrough, onClick }) => ( 
  <li 
    style={{ 
      cursor: 'pointer', 
      textDecoration: strikethrough ? 'line-through' : 'none' 
    }} 
    onClick={onClick} 
  > 
    {label} 
  </li> 
); 
 
export default MyItem; 

It's a simple list item. The textDecoration style changes based on the value of the strikethrough prop. When this is true, the text will appear to be striked out.

Let's load up this app in your browser and watch the state of MyList change as the interval handler is called. Once the app loads, make sure you have the React Developer Tools pane open and ready to go. Then, expand the <App> element and select <MyList>. You'll see the state of the element to the right:

The rendered content to the left matches the state displayed to the right for the selected <MyList> element. There's an array of 5 items, and a list of 5 items is rendered on the page. This example uses an interval timer to update the state over time (until it reaches 10 items). If you watch closely, you can see that the state value to the right changes in sync with the rendered content, as new list items are added. You can also expand individual items in the state to see their values:

If you expand the <MyList> element, you'll see all of the <MyItem> elements rendered as a result of items being added to the items array state. From there, you can select <MyItem> elements to view its props and state. In this example, the <MyItem> elements only have props—no state:

You can see the props passed to a given element in the tree view to the left. This is a little difficult to read though, compared to the values you can see to the right that show you the prop values of the selected element. The following props are passed to <MyItem>:

• label: The text to be rendered
• onClick: The function that's called when the item is clicked
• strikethrough: If true, the text is rendered with a strikethrough style

You can watch the values of properties change as elements are re-rendered. In the case of this app, when you click on a list item, the handler function will change the state of the items list in the <MyList> element. Specifically, the index of the item clicked will toggle its strikethrough value. This in turn will cause the <MyItem> element to re-render itself with the new prop value. If you keep the element that you're about to click on selected in the developer tools pane, you can keep an eye on props as they change:

The text for the first item is rendered with the strikethrough style. This is because the strikethrough property is true. If you look closely at the prop values to the right of the element tree in the developer tools pane, you can see individual props flash yellow when they change—a visual cue that's handy for debugging your components.