Mocking up data in React Components
<p>I am using data fixtures for Charts ( using <a href="http://recharts.org" rel="nofollow noreferrer">Recharts</a> )</p>

<p>See here</p>

<pre><code>const charts = [
  {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
  {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
  {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
  {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
  {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
  {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
  {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
</code></pre>

<p>Then I have my <em>ChartGrid Component</em> where I want to display each single <em>Chart</em></p>

<pre><code>export default class ChartsGrid extends React.Component{

  render() {

    return (
      &lt;div className="grid"&gt;
        {this.props.charts.map((chart, i) =&gt; &lt;Chart {...this.props} key={i} i={i} chart={chart} /&gt;)}
      &lt;/div&gt;
    )
  }
};
</code></pre>

<p>This is Single <em>Chart Component</em></p>

<pre><code>export default class Chart extends React.Component {

  render () {
    const { charts, i} = this.props;
    return (
        &lt;LineChart width={600} height={300} data={charts}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}&gt;
       &lt;XAxis dataKey="name"/&gt;
       &lt;YAxis/&gt;
       &lt;CartesianGrid strokeDasharray="3 3"/&gt;
       &lt;Tooltip/&gt;
       &lt;Legend /&gt;
       &lt;Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/&gt;
       &lt;Line type="monotone" dataKey="uv" stroke="#82ca9d" /&gt;
      &lt;/LineChart&gt;
    );
  }
};
</code></pre>

<p>All works fine, see the the image with 7 charts representing the same data</p>

<p><a href="https://i.stack.imgur.com/Wuluk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wuluk.png" alt="enter image description here"></a></p>

<p>How can I change my data fixtures in order to have only single chart element with this data?</p>