title: Redux presentational properties similar to decorator pattern
body: <p>Say the state of our application container is so (straight from the server):</p>
  
  <pre><code>[
    {first: 'tyrion', last: 'lannister', email: 'tmoney@lannister.com'},
    {first: 'jaime', last: 'lannister', email: 'jaime@lannister.com'}
  ]
  </code></pre>
  
  <p>We hand our data down to the presentational component, but the designers have asked for a capitalized full name, and obfuscated email.</p>
  
  <p>So we want to render something like:</p>
  
  <pre><code>&lt;div&gt;
     &lt;p&gt;Tyrion Lanniser - tmoney@***.com&lt;/p&gt;
     &lt;p&gt;Jaime Lanniser - jaime@***.com&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How <strong>should</strong> we handle purely presentational transformations of the data in the react/redux world?</p>
  
  <p>Coming from the Rails world, I would add a decorator function in the presentation component like below so that it's the presentation component's responsibility to add properties that are rendered... not the reducer or container component:</p>
  
  <pre><code>const decorate = (person)=&gt; {
    return {
      ...person,
      _full_name: capitalize(person.first_name + ' ' + person.last_name),
      _email: obfuscate(person.email)
    }
  }
  
  # ...
  constructor(props) {
    super(props)
  
    state = {
      persons: this.props.persons.map((person)=&gt; decorate(person))
    }
  }
  </code></pre>
  
  <p>But this seems to be an anti-pattern? Why? What are the downsides of this approach? This <strong>feels</strong> clean to me as the underlying data/state isn't changed, the child component, simply adds presentational properties to the data it receives.</p>