NextJS: Convert className function into styled components code

Question

so im watching a video tutorial and have code like this, but since im using styled-components im confuse about how to add statusClass(0) inside styled-components code

and this is my script:

for styling like this

const HasDone = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const InProggress = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: inProgress 1s ease infinite alternate;

  @keyframes inProgress {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;

const Undone = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.3;

`;

call it here also make it function the same as a video

const Order = () => {
 const status = 0;

 const StatusClass = (index) => {
   if (index - status < 1) return HasDone;
   if (index - status === 1) return InProggress;
   if (index - status > 1) return Undone;
 };

 return (
   <Container>
     <Left>
       <Row>
         .....
       </Row>
       <Row>
         <StatusClass>
           <PaymentOutlined
             style={{ color: "black", width: "30", height: "30" }}
           />
           <span>Payment</span>
           <CheckedIcon>
             <CheckBoxOutlined
               style={{ color: "black", width: "30", height: "30" }}
             />
           </CheckedIcon>
         </StatusClass>

as you can see because I'm using styled-components changes the HTML element too.

if I try to change like this

<StatusClass(0)>

It gives me an error so how do I convert this to the styled component?

Jarack · Accepted Answer · 2022-04-22 08:01:08Z

1

The way you are calling StatusClass right now will result in an object error, because React does not let objects be valid components. This article can help understand that error better. However, to answer your question, you can just set a component equal to whichever index you want, and define that index via props (as i did in my example) or state. Here is a stackblitz that might help.

answered Apr 22, 2022 at 8:01

Jarack

512 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

YouCanCallMe Syarif Over a year ago

okay thank you, but im using the next js tho, instead of passing to render that don't know where because using nextJS, I want to pass it to the const can I do that so my code is like this codesandbox.io/s/inspiring-sanne-2yirn1?file=/pages/test.jsx

YouCanCallMe Syarif Over a year ago

don't mind me I typo there

Jarack Over a year ago

Im not sure what you are trying to ask with this comment. From the code snippet you gave, it looks like it would function fine, besides the missing component definitions

Collectives™ on Stack Overflow

NextJS: Convert className function into styled components code

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related