title: How to display React Recharts dynamically?
body: <p>I am using React Recharts and I want to display it dynamically.
  <a href="https://recharts.org/en-US/examples/CustomActiveShapePieChart" rel="nofollow noreferrer">https://recharts.org/en-US/examples/CustomActiveShapePieChart</a></p>
  <pre class="lang-js prettyprint-override"><code>&lt;ResponsiveContainer width='99%' aspect={3.0 / 2.0}&gt;
    &lt;LineChart width={500} height={300} data={this.state.android}&gt;
      {/* margin={{ top: 5, right: 0, left: -40, bottom: 5 }}&gt; */}
      &lt;XAxis dataKey=&quot;Date&quot;/&gt;
      &lt;YAxis/&gt;
      &lt;Tooltip /&gt;
      &lt;Legend /&gt;
      &lt;CartesianGrid stroke=&quot;#eee&quot; strokeDasharray=&quot;5 5&quot;/&gt;
      {/* &quot;#AD7BEC&quot;
      &quot;#F88E4E&quot; */}
      &lt;Line name=&quot;android&quot; type=&quot;monotone&quot; dataKey=&quot;android&quot; stroke=&quot;#ff883c&quot; strokeWidth={2} /&gt;
      &lt;Line name=&quot;ios&quot; type=&quot;monotone&quot; dataKey=&quot;ios&quot; stroke=&quot;#ffb847&quot; strokeWidth={2} /&gt;
    &lt;/LineChart&gt;
  &lt;/ResponsiveContainer&gt;
  </code></pre>
  <p>This is my code for plotting line chart of recharts but I am doing this in hard code way... Now I have a data key array which is generated dynamically and now I want to pass that key to there</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Line name=&quot;android&quot; type=&quot;monotone&quot; dataKey=&quot;android&quot; stroke=&quot;#ff883c&quot; strokeWidth={2} /&gt; 
  </code></pre>
  <p>And I want to pass element of array to datakey variable like this</p>
  <pre class="lang-js prettyprint-override"><code>dynamic_array=[&quot;android&quot;,&quot;ios&quot;,&quot;value&quot;]
  &lt;Line name=&quot;android&quot; type=&quot;monotone&quot; dataKey=dynamic_array[0] stroke=&quot;#ff883c&quot; strokeWidth={2} /&gt; 
  </code></pre>
  <p>Can I apply <code>map</code> or <code>forEach</code>?</p>