CODEWITHSUNDEEP
javascriptreactjs
Alwaysblue
Alwaysblue

Reputation: 11830

Dynamically attaching style in map array function

I want to dynamically attach color to my react component

These are the colors I want to attach 

  this.color = ["#E91E63", "#2196F3", "#FDD835"]

I am mapping an array in JSX (sort of like this) 

   { this.state.graphData.map(data => {
        (<VictoryArea name="area-1" data={data} style={{ data: { fill: "#E91E63" } }}/>)
    })}

My mapped array have 6 elements.

I want element 1 and element 4 to have same color, 2 and 5, 3 and 6.

Question: Can someone please help me in figuring out how I can attach dynamic color in fill?

Upvotes: 3

Views: 68

Answers (1)

Tholle
Tholle

Reputation: 112777

You can use the second argument of the map function which is the index of the element, along with the % operator to get the color dynamically.

{this.state.graphData.map((data, index) => 
  <VictoryArea
    name="area-1"
    data={data}
    style={{ data: { fill: this.color[index % this.color.length] } }}
  />
)}

Upvotes: 2

Related Questions