title: How can I map an array of properties to a Bar with that properties in recharts?
body: <p>I want to have a chart component in react(recharts) and when I use map function to map my properties array to bars with that props the problem is it doesn't show bars in my chart !
  This is my code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const HorizontalBarChart = (props: {
    data: Array&lt;any&gt;,
    properties: Array&lt;any&gt;,
  }) =&gt; {
    const barItems = props.properties.map((obj) =&gt; {
      &lt;Bar dataKey={obj.key}
        fill={obj.color}
        radius={[0, 10, 10, 0]}
      &gt;
      &lt;/Bar&gt;
    });
  
    return (
      &lt;BarChart
        width={450}
        height={250}
        data={props.data}
        layout="vertical"
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      &gt;
        {barItems}
        &lt;CartesianGrid horizontal={false} /&gt;
        &lt;XAxis
          type="number"
          reversed={true}
          domain={[0, MAX]}
        //hide={true}
        /&gt;
        &lt;YAxis type="category"
          dataKey="name"
          orientation="right"
          hide={true}
        /&gt;
      &lt;/BarChart&gt;
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But when I implement bar tags manually it works ! like this :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const HorizontalBarChart = (props: {
    data: Array&lt;any&gt;,
    properties: Array&lt;any&gt;,
  }) =&gt; {
  
    return (
      &lt;BarChart
        width={450}
        height={250}
        data={props.data}
        layout="vertical"
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      &gt;
        &lt;Bar dataKey={props.properties[1].key}
          fill={props.properties[1].color}
          radius={[0, 10, 10, 0]}
        &gt;
        &lt;/Bar&gt;
        &lt;Bar dataKey={props.properties[2].key}
          fill={props.properties[2].color}
          radius={[0, 10, 10, 0]}
        &gt;
        &lt;/Bar&gt;
        {barItems}
        &lt;CartesianGrid horizontal={false} /&gt;
        &lt;XAxis
          type="number"
          reversed={true}
          domain={[0, MAX]}
        //hide={true}
        /&gt;
        &lt;YAxis type="category"
          dataKey="name"
          orientation="right"
          hide={true}
        /&gt;
      &lt;/BarChart&gt;
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And I'll be happy if you help me to solve this problem in recharts.</p>