As times we might need to render out one of several components based on state or something the user is doing. You definitely don't want to write something like this:

{
   currentState === states.BEGIN ? (
      <BeginApplication />
   ) : currentState === states.REVIEW ? (
      <ReviewApplication />
   ) : currentState === states.UPLOAD ? (
      <UploadApplication />
   ) : null
}

With only three states this is already hard to read and parse. Instead we can create a map object using the state as the key and the component to render as the value. This is cleaner and easier to read.

const stateToComponents = {
   [states.BEGIN] = BeginApplication
   [states.REVIEW] = ReviewApplication,
   [states.UPLOAD] = UploadApplication
}

{stateToComponents[currentState]}