Add background to styled-components while use ".map" method

Hi everyone, it's my first post on DEV!

Two days ago I hit a small problem, but still, that took time to solve it.

I decide to write a little post about it for future me and maybe someone who will meet the same issue. I hope it will be helpful and save some time for someone!

The thing that I should do, was to display different background on a couple of divs while using styled-components and map method. I try to pass the background as property but it didn't work. I think the reason behind that is either me who pass prop incorrectly, or props in the first place wouldn't work in that case? It doesn't matter cause I came up with another solution.

It's inline styles. I dunno how much the performance unfriendly and I sure that a better solution exists, but if you struggle with the same problem and yet don't find a solution, I hope my small code example would help you!

Thanks for attention.

Edit note. You should use camelCase property when to write inline styles like "backgroundSize". I forget that when write example code. Sorry.