How should I pass data in my render method with React/redux
<p>I'm trying to adapt the following react bar chart to my react/redux project : <a href="http://codepen.io/clindsey/collab/RRZBQm/" rel="nofollow">http://codepen.io/clindsey/collab/RRZBQm/</a>. Most of the code is ok for me however I don't really understand the rendering part : </p>

<pre><code>setTimeout(() =&gt; {
  const data = {'alpha': 82, 'bravo': 20, 'charlie': 68};
  const size = [480, 320];
  const margins = [40, 40, 40, 40];
  ReactDOM.render(
    &lt;BarChart {...{data, margins, size}} /&gt;
  , document.getElementById('js-app'));
}, 0);
</code></pre>

<p>Why in this example, "const" are passed in ReactDOM.render function through the BarChart element ? </p>

<p>When adapting this to my local project I've got the following code in my container : </p>

<pre><code>    const App = () =&gt; (

      &lt;div&gt;
        &lt;Component1 /&gt;
        &lt;Component2 /&gt;
        &lt;BarChart /&gt;
      &lt;/div&gt;
    );

    export default App;
</code></pre>

<p>then I use <code>mapStateToProps</code> function to pass <code>const data</code>, <code>const size</code> and <code>const margins</code>, like this : </p>

<pre><code>const data = {'alpha': 82, 'bravo': 20, 'charlie': 68};
const size = [480, 320];
const margins = [40, 40, 40, 40];

     function mapStateToProps(state) {
        return {
            data: data,
            size: size,
            margins: margins,
                  };
                };
</code></pre>

<p>It's working fine but I didn't really understand what I'm doing. Not sure if It's good practice or it it's heaven make sense.</p>

<p>Thanks. </p>