title: At which point in the lifecycle should I modify my props?
body: <p>I have a react component that receives some props. These props need to be mapped to a different structure in order to be usable (for a select, which expects a different structure than our store). I'm wondering at which point in the lifecycle I should do this.</p>
  
  <p>I've read the documentation: <a href="https://facebook.github.io/react/docs/component-specs.html" rel="nofollow">https://facebook.github.io/react/docs/component-specs.html</a>, and it recommends to keep the render function pure: </p>
  
  <blockquote>
    <p>The render() function should be pure, meaning that it does not modify
    component state, it returns the same result each time it's invoked,
    and it does not read from or write to the DOM or otherwise interact
    with the browser</p>
  </blockquote>
  
  <p>Now I'm assuming that it's still ok to map the <code>props</code>, as that's not <code>state</code> and I'm not changing them:</p>
  
  <pre><code>import React from 'react';
  
  export default class IndicatorSelect extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      const options = this.props.store.items.map(item =&gt; ({ value: item.id, label: item.name }));
  
      return (
        &lt;div&gt;Display the data in some way here: {options.value} {options.label}&lt;/div&gt;
      );
    }
  }
  
  ThisComponent.propTypes = {
    store: React.PropTypes.object.isRequired,
  };
  </code></pre>
  
  <p>Is this the recommended way, or should the parent component be responsible for formatting the props passed to this component? Or I should I do this in a lifecycle method, or a completely different manner?</p>