Pass a variable in a styled-components in React

Question

I try to pass a variable in a component that uses styled-components

This is how I call the component

<td><p><LimitBar width = {perc}/> {perc}%</p></td>

perc is a number between 0 and 100

Then, the LimitBar is like this

const LimitBarBorder = styled.span` ...some css `; const LimitBarColored = styled.span` ...some more css width: ${props => props.width}; `; const LimitBar = (width) => ( <LimitBarBorder> <LimitBarColored width={width}></LimitBarColored> </LimitBarBorder> ); export default LimitBar;

But, then, the HTML code is like this

<td> <p> <span class="sc-pHKzq izKVhe"> <span width="[object Object]" class="sc-pQFoF bkUWrD"></span> </span> 85% </p> </td>

As you can see, the width parameter passed as object, while it is just a number. I am new on React and try to do it with online tutorials and official documentations.

Jonathan Akwetey Okine · Accepted Answer · 2020-08-28 11:15:25Z

1

const LimitBar = ({width}) => ( <LimitBarBorder> <LimitBarColored width={width}></LimitBarColored> </LimitBarBorder> ); export default LimitBar;

It doesn't look like you're passing in the prop correctly.

answered Aug 28, 2020 at 11:15

Jonathan Akwetey Okine

1,3203 gold badges17 silver badges18 bronze badges

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

7 Comments

Tasos Over a year ago

Now, I get <span width="85" class="sc-pQFoF dsLEU"></span> without applying the CSS rule.

Jonathan Akwetey Okine Over a year ago

What css rule if I may ask? Because your question was how to pass in the variable.

Tasos Over a year ago

It is in the question. Sorry if wasn't clear width: ${props => props.width};

Jonathan Akwetey Okine Over a year ago

how are you able to tell that the width of 85 on the span element is not being applied?

Tasos Over a year ago

Actually, that is the problem. Changing it to width: ${props => props.width + '%'};, together with the changed in your answer, fixed the problem

|

Anis R. · Accepted Answer · 2020-08-28 11:15:42Z

On this line:

width: ${props => props.width};

You are setting the width to be equal to the function that takes props as parameter and returns props.width. To fix, just insert props.width instead:

width: ${props.width};

Edit: Also see Jonathan's answer and adjust your function component accordingly.

With or without the Jonathan's change, changing the width as you suggest raises this error on console props is not defined

Collectives™ on Stack Overflow

Pass a variable in a styled-components in React

2 Answers 2

7 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Related