title: react js svg linearGradient not rendering correct value
body: <p>I have a component where I'm rendering SVG paths and a linearGradient value provided from static data via the parent component. The properties are called 'startColor' &amp; 'stopColor' mainly for the start and stop colours for the gradients. </p>
  
  <p>When I console log the values for each object they are correct however, they are not rendering as expected. Please note the values for dataTwo object are different.</p>
  
  <p>I suspect that on render the first value from the first object is what's used across all components. I've tested this and seems to be the case. </p>
  
  <p>How can I get each circle to render the correct gradient colours provided within data? </p>
  
  <p>Data structure: </p>
  
  <pre><code>    const dataOne = [
      {
          title: 'Cpu utilisation',
          graph: 65,
          noBorder: false,
          noMargin: false,
          startColor: '#2DC0FF',
          stopColor: '#0160B2'
      },
      {
          title: 'Memory utilisation',
          graph: 65,
          noBorder: true,
          noMargin: true,
          startColor: '#2DC0FF',
          stopColor: '#0160B2'
      },
  ]
  
  const dataTwo = [
      {
          title: 'Warnings today',
          graph: 65,
          noBorder: false,
          noMargin: false,
          startColor: '#fa9100',
          stopColor: '#ffc14f'
      },
      {
          title: 'Errors today',
          graph: 65,
          noBorder: true,
          noMargin: true,
          startColor: '#fa9100',
          stopColor: '#ffc14f'
      },
  ]
  </code></pre>
  
  <p>Component usage: </p>
  
  <pre><code>&lt;div className="tab-info-body large"&gt;
      &lt;DoubleGraph data={dataOne} /&gt;                              
  &lt;/div&gt;
  &lt;div className="tab-info-body large"&gt;
      &lt;DoubleGraph data={dataTwo} /&gt;                              
  &lt;/div&gt;
  </code></pre>
  
  <p>Component code: </p>
  
  <pre><code>render() {
          const { data, title, startColor, stopColor } = this.props;
          const { value, valueOne, valueTwo, hidden, visible, valueOneYPos, valueTwoYPos, valueOneHidden, valueTwoHidden, dashArray, dashArrayBorder } = this.state;
          const styleOne = { transform: `translate(0px, ${valueOneYPos}px)` };
          const styleTwo = { transform: `translate(0px, ${valueTwoYPos}px)` };
  
          return (
              &lt;div className="double-graph-wrap"&gt;
                  &lt;div className="flex"&gt;
                      {data.map((item, i) =&gt; {
                          console.log("give me colour", item.startColor)
                          return (
                              &lt;div className={classNames('wrap', { noBorder: item.noBorder, noMargin: item.noMargin})}&gt;
                                  {i === 1 &amp;&amp;&lt;div className="border-test"&gt;&lt;/div&gt;}
                                  &lt;span className="title"&gt;{item.title}&lt;/span&gt;
                                  &lt;div className="graph-wrap"&gt;
                                      &lt;div className="graph"&gt;
                                          &lt;div className="value-wrap"&gt;
                                              &lt;div className="values"&gt;
                                                  &lt;span style={styleOne} className={classNames("valueOne", {hidden: valueOneHidden})}&gt;{valueOne}&lt;/span&gt;
                                                  &lt;span style={styleTwo} className={classNames("valueTwo", {hidden: valueTwoHidden})}&gt;{valueTwo}&lt;/span&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="single-chart"&gt;
                                              &lt;div style={{ background: 'black', width: 100, height: 100}}&gt;{item.startColor}&lt;/div&gt;
                                              &lt;svg viewBox="0 0 36 36" class="circular-chart orange"&gt;
                                              &lt;defs&gt;
                                                &lt;linearGradient id='grad'&gt;
                                                  &lt;stop stop-color={item.startColor} /&gt;
                                                  &lt;stop offset='100%' stop-color={item.stopColor} /&gt;
                                                &lt;/linearGradient&gt;
                                                &lt;/defs&gt;
                                                  &lt;path class="circle-bg"
                                                      d="M18 2.0845
                                                      a 15.9155 15.9155 0 0 1 0 31.831
                                                      a 15.9155 15.9155 0 0 1 0 -31.831"
                                                  /&gt;
                                                      &lt;path class="borderTwo"
                                                      stroke-dasharray={dashArrayBorder}
                                                      d="M18 2.0845
                                                      a 15.9155 15.9155 0 0 1 0 31.831 
                                                      a 15.9155 15.9155 0 0 1 0 -31.831"
                                                  /&gt;
                                                  &lt;path class="circle"
                                                      stroke-dasharray={dashArray}
                                                      d="M18 2.0845
                                                      a 15.9155 15.9155 0 0 1 0 31.831 
                                                      a 15.9155 15.9155 0 0 1 0 -31.831"
                                                  /&gt;
                                                  &lt;path class="borderOne"
                                                      stroke-dasharray="1, 100"
                                                      d="M18 2.0845
                                                      a 15.9155 15.9155 0 0 1 0 31.831 
                                                      a 15.9155 15.9155 0 0 1 0 -31.831"
                                                  /&gt;
                                                  &lt;path class="average"
                                                  stroke-dasharray="1, 100"
                                                      d="M18 2.0845
                                                      a 15.9155 15.9155 0 0 1 0 31.831"
                                                  /&gt;
                                              &lt;/svg&gt;
  
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          )
                      })}
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>