title: pass array of objects to react component
body: <p>I created a progress bar component that takes props like color, height, value and max. Right now it shows one sigle progress bar and i am trying to group progress bar and group them by color. Here is my component </p>
  
  <pre><code>const ProgressBar = ({
    heightSize,
    value,
    max,
    ...customProps
  }) =&gt; {
    const classes = classNames([
      'my-ProgressBar',
      { [`my-ProgressBar--${heightSize}`]: heightSize },
      customProps.className,
    ]);
  
    const normalizedValue = (value / max) * 100;
  
    return (
      &lt;progress
        {...customProps}
        style={{ color: customProps.color }}
        className={classes}
        max={100}
        value={normalizedValue}
        aria-valuemax={100}
        aria-valuemin={0}
        aria-valuenow={normalizedValue}
        tabIndex="-1"
      /&gt;);
  };
  </code></pre>
  
  <p>I am trying to update this component so that if i pass an array to this component, it'll return grouped progress bar. Here is one of my failed attempts. </p>
  
  <pre><code>const ProgressBar = (groups) =&gt; {
          const GroupProgressBar= groups.map((group) =&gt; (
          &lt;div key={group.color}&gt;
            color: {group.color},
            heightSize: {group.height},
            value: {group.value},
            color: {group.color}          
          &lt;/div&gt;
        ));
              return (
                &lt;progress
                  {...customProps}
                  style={{ color: group.color }}
                  className={classes}
                  max={100}
                  value={normalizedValue}
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={normalizedValue}
                  tabIndex="-1"
                /&gt;);
          });
  </code></pre>
  
  <p>How do i udpate my component so it will work on groups?</p>