Conditional Styling and Remounting

Conditional classes are just string expressions. For anything beyond one or two toggles, a helper such as classnames keeps it readable.

<button className={isActive ? "tab tab-active" : "tab"}>Overview</button>

// With a helper
<button className={classNames("tab", { "tab-active": isActive })}>
  Overview
</button>

Conditionals change what React reuses

React matches elements between renders by position and type. If the type at a position is the same, React reuses the existing DOM node and its state. If it differs, it destroys the old one and builds a new one.

// Same type at the same position: the input keeps its value
{isEditing ? <input className="edit" /> : <input className="view" />}

// Different type: the DOM node is thrown away and rebuilt
{isEditing ? <input /> : <textarea />}

Forcing a reset with key

Sometimes resetting is exactly what you want - for example, clearing a form when the selected record changes. Give the element a key that changes, and React rebuilds it with fresh state.

// Each time userId changes, the form remounts with empty state
<ProfileForm key={userId} userId={userId} />