CODEWITHSUNDEEP
cssreactjscss-selectorsstyled-components
Daniel Cross
Daniel Cross

Reputation: 61

nth-child(odd) affecting all children instead of odd

I have a span on my portfolio that I want to reverse with every odd entry. The projects are dynamically rendered from an array that's being mapped over and passed into this component via props.

I'm using styled-components also.

The issue I'm having is that odd or even within the nth-child affects all of the projects. For example, when it's on odd, none of them are reversed but when it's on even all of them are reversed. What have I missed here?

enter image description here

Upvotes: -1

Views: 1649

Answers (1)

Puja Srivastava
Puja Srivastava

Reputation: 336

<SummaryContainer/> is not getting mapped. That means, i'm assuming that you are running the map on entire Project component. That is why , nth-child is not working. An easier way to do this is,

Step 1: Pass index as a prop to Project Component.

Step 2: Pass style to add row or row-reverse based on odd even logic

<JobContainer style={{ flexDirection: props.index % 2 ? 'row' : 'row-reverse' }}>

</JobContainer>

Step 3: <JobContainer /> component just use this style as prop.style

This should solve your issue.

Upvotes: 1

Related Questions