Propful Only Components

Because state does not persist across renders (and is difficult to get out of the component itself), the solution is to rely on props. In comparison to the last example, there are two examples here: Propful Box and Stateful Box.

The text that is already wrapped here is in a Propful Box. You can create more of these or create a Stateful Box for comparison. What you will see with the Propful Box is that in addition to the color persisting as it did in the previous example, the number of clicks will also persist when going back and forth between Edit Text and Render Text. You can also see the props that are passed to all elements by expanding the All Props display container at the bottom of the page. This display uses the getAllPortalProps function which is passed through the EditableContentContext and allows developers to extract props to save for future hydration.

Note: this example is also not affected by the insertion of new numbers as the user switches back and from from editable and rendered text (as was seen in the prior example). This is not due to the switch to a Propful Only component, but is due to another fix related to the EXCLUDE_FROM_DEHYDRATED value. For more information on this, see the documentation.