How to extract a const that depends on a map?

I have animations in my component that follow the same style, like this:

{actions.map((action, i) => (
    <Component style={{ animation: `fade-animation 12s linear ${i * 3}s infinite` }}>{action}</Component>
))}

{figures.map((figure, i) => (
    <Component style={{ animation: `fade-animation 12s linear ${i * 3}s infinite` }}>{figure}</Component>
))}

The value fade-animation 12s linear ${i * 3}s infinite it’s being repeated in multiple places.

How can I extract this into a const?

I tried:

const fadeAnimation = `fade-animation 12s linear ${i * 3}s infinite`;

But as the i depends on the map, it causes an error.

Can I extract this even with the i?

Thanks!!

>Solution :

const fadeAnimation = (time) => `fade-animation 12s linear ${time * 3}s infinite`;

Use it like this:

{figures.map((figure, i) => (
    <Component style={{ animation: fadeAnimation(i) }}>{figure}</Component>
))}