CODEWITHSUNDEEP
reactjsstyled-components
Tasos
Tasos

Reputation: 7587

Pass a variable in a styled-components in React

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.

Upvotes: 0

Views: 4486

Answers (2)

Anis R.
Anis R.

Reputation: 6922

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.

Upvotes: 0

Jonathan Akwetey Okine
Jonathan Akwetey Okine

Reputation: 1295

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

export default LimitBar;

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

Upvotes: 1

Related Questions