css - Styled Component-prop inuti en map

Jag försöker räkna ut SVG-bredden baserat på ett prop-värde. Det är en array av SVG och varje enskild ska ha en specifik bredd. Den beräknar breddvärdet perfekt men upprepar det första värdet från mappen för alla andra. När jag gör en console.log av värdet inom mappen visar det olika värden för varje enskild.

Här är kartan:

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

Här är den stylade komponenten som tar emot prop:

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

Svar #1

Jag har försökt återskapa det på CodeSandbox och jag kunde inte.

 {widths.map((value) => (
    <Box key={`key-${value}`} value={value}>
      Hi! I'm a box with {(value * 100) / 5}% width.
    </Box>
  ))}

• glöm inte att lägga till key på komponenten i mappen.
• om dina värden är större än 5, då kommer du att ha värden större än 100% för bredd, kanske använd rem, px istället för %