Resources and Prep titles made translatable - #47972

This is a nitpick for sure so feel free to leave it as is.

The only value that seems to be changing is the text so I think you could have the logic wrap only the text instead of the entire div and child element like this:

<div style={styles.object}>
  <h4>
    {this.props.objectToRollUp === 'Resources' && i18n.resources()}
    {this.props.objectToRollUp === 'Prep' && i18n.preparation()}
  </h4>
</div>

Also just double check that renders properly with that syntax (I didn't test it)

You would still need to not render the <div> if the objectToRollUp was not one of the two, so you would need the original guard.

Hm. Maybe for now just (does the linter allow it?):

(this.props.objectToRollUp === 'Resources' ||
 this.props.objectToRollUp === 'Prep') && (
<div style={styles.object}>
  <h4>
    {this.props.objectToRollUp === 'Resources' ? i18n.resources() : i18n.preparation()}
  </h4>
</div>
)

If the i18n keys were the same (or could make "Prep" into "Preparation"), it could be simply {i18n[this.props.objectToRollUp.toLowerCase()]()}, lol.

React sure makes this messy! The actual "proper" thing might be to try to have a render function for each type and have the content and negotiation be separate. And maybe have functions like isResources() to capture the === so those aren't everywhere. I dunno!