Stateful and Propful Components

Since we are using React, we presumably want our components to have the ability to change. Generally speaking, the two most common ways that that is done are through changes to a component's props or its state. Here we have two different components which handle those changes differently.

There are two components here: Stateful and Propful and Stateful Only. Both of these component types will keep track of the number of times that they have been clicked in their own state. However, Stateful and Propfulalso has its border color set by a prop. Try clicking on the Rotate Color From... Button to see all instances of the Stateful and Propful change their border color. Note that the change border color will persist when clicking the Render Text button and then the Edit Text button again. This means that the border color prop is stable across re-renders.

What you should observe is that clicking the Rotate Color From... Button changes the border color of every instance of Stateful and Propful. These changes will not only persist when switching back and forth between Edit Text and Render Text, all new Stateful and Propful components will have the same border color when they are created.

However, as you go back and forth between the text being rendered and the text being edited, you will see that the click count is not being preserved in the same way. The prior click count will remain, but a new click count will also appear as 0. For example, if you click the Stateful Only component 7 times, the component will read as “7 Stateful Only Component”. Clicking the “Render Text Button” will then change this to “0 7 Stateful Only Component”. There are two separate things happening here:

• The re-rendering of the component will cause it to reinitialize its click count state as 0, which it will then display at the beginning of the component.
• The previous click count of “7” is absorbed into the text that is being rendered.

What this illustrates is that components are re-rendered by switching. This destroys the state, but props are preserved at a higher level. The next example will show a better way of managing this situation with a stable click count.

Additionally, clicking any of the rendered components should increase the click count that is displayed in that component, BUT, you will note that that number is reset every time when switching back and forth between Edit Text and Render Text.

Note: When switching back and forth, the previous count will still show, meaning more and more numbers will appear. This gives you a record of what the previous state was, but also demonstrates why it is not a good idea to render additional text in your wrappers.