Styled Component prop inside a map

Viewed 97

I'm trying to calculate the svg width based on a prop value. It's an array of svg and each one should have a specific width. It is perfectly calculating the width value but it's repeating the first value of the map for all others. When I console.log the value inside the map it shows different values for each one.

Here's the map:

  {example.map(v => (
              <ComponentExample value={v.value} />
   ))}

Here's the styled component receiving prop:

const ComponentExample = styled(ExampleSVG)<{ value: number; }>`
width: ${props => (props.value * 100) / 5}%;`;
0 Answers
Related