How to style previous siblings in react styled-components? - css

Question

I have react component like this:
const StyledMenu = () => {
const [currentStep, setCurrentStep] = React.useState('template');
const steps = ['template', 'audience', 'demography', 'action'];
const goToNextStep = () => {
const index = steps.indexOf(currentStep);
setCurrentStep(steps[index + 1]);
};
const goToPreviousStep = () => {
const index = steps.indexOf(currentStep);
if (index === 0) {
return;
}
setCurrentStep(steps[index - 1]);
};
return(
<div>
<StepsWrapper>
{steps.map((step, index) => (
<Step key={step} active={step === currentStep} last={index === 3}>
<StepDescription>{step}</StepDescription>
</Step>
))}
</StepsWrapper>
</div>
)
}
const StepsWrapper = styled('div')`
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
height: 69px;
line-height: 69px;
text-align: center;
position: relative;
top: 27px;
`;
const Step = styled('div')<{ active: boolean; last: boolean }>`
color: ${({ active }) =>
active ? '#44b3db' : '#c7e8f4'};
`;
const StepDescription = styled('div')`
width: 240px;
height: 29px;
font-family: Roboto;
font-size: 18px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
`;
and I'm trying to style the items which are before the active item. If the first item is active, then nothing will be styled. I want to achieve styles from these images:
and
and
How can I achieve this? Thanks in advance!

Answer 1

I achieved this by adding a new state for the active index, and to styled-component I sent a boolean if the active index is bigger than the index, so the indexes less than current active index will be styled differently as #vishnu mentioned in the comment above. The code looks now like this
const StyledMenu = () => {
const [currentStep, setCurrentStep] = React.useState('template');
const steps = ['template', 'audience', 'demography', 'action'];
//added this line of code
const [activeIndex, setActiveIndex] = React.useState(0);
const goToNextStep = () => {
const index = steps.indexOf(currentStep);
setCurrentStep(steps[index + 1]);
//set the new activeIndex
setActiveIndex(index + 1);
};
const goToPreviousStep = () => {
const index = steps.indexOf(currentStep);
if (index === 0) {
return;
}
setCurrentStep(steps[index - 1]);
//set the new activeIndex
setActiveIndex(index - 1);
};
return(
<div>
<StepsWrapper>
{steps.map((step, index) => (
//sending the checked props to the styled component
<Step key={step} active={step === currentStep} last={index
=== 3} checked={activeIndex > index}>
<StepDescription>{step}</StepDescription>
</Step>
))}
</StepsWrapper>
</div>
)
}
const StepsWrapper = styled('div')`
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
height: 69px;
line-height: 69px;
text-align: center;
position: relative;
top: 27px;
`;
const Step = styled('div')<{ active: boolean; last: boolean;
checked: boolean }>`
//checking if component is marked to be styled differently
color: ${({ active, checked }) =>
active ? '#44b3db' : checked ? 'red' '#c7e8f4'};
`;
const StepDescription = styled('div')`
width: 240px;
height: 29px;
font-family: Roboto;
font-size: 18px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
`;