Why isn't my Styled component data getting passed into my Button for React?

Question

So I create this button with styled-components and it is a react-scroll link

import { Link } from 'react-scroll';

export const Button = styled(Link)`
  border-radius: 50px;
  background: ${({ primary }) => (primary ? 'red' : 'blue')};
`;

So on my Hero section, these props work fine

<Button
  to="signup"
  smooth={true}
  duration={500}
  spy={true}
  exact="true"
  offset={-80}
  primary="true"
  dark="true"
>
  Sign Up
</Button>;

But in my other section I use an object with data to get the values and for some reason, they are not applying the primary

const Main = ({ primary, dark }) => {
  return (
    <Button
      to="home"
      dark={dark ? 'true' : 'false'}
      primary={primary ? 'true' : 'false'}
    >
      {buttonLabel}
    </Button>
  );
};

Then in my data.js file for the main section I pass in this value

export const dataOne = {
  primary: false,
  dark: true,
};

export const dataTne = {
  primary: true,
  dark: false,
};

So if I console.log primary, it will just say false for both.

I updated my button element to the color orange if primary is true and that changes all my buttons to orange, but it doesn't make any sense why my data.js file isn't able to transfer my data over for the background color.

The only way it work for me to get data to pass through is if I create a styled component inside of the main section instead of having it outside?

related https://stackoverflow.com/questions/39326300/why-we-cannot-pass-boolean-value-as-props-in-react-it-always-demands-string-to — diedu, Oct 02 '20 at 04:35

diedu · Answer 1 · 2020-10-02T17:44:36.290

You are passing down strings, not booleans, change how you assign values to props by using {} instead of quotes

<Button
  to="signup"
  smooth={true}
  duration={500}
  spy={true}
  exact={true}
  offset={-80}
  primary={true}
  dark={true}
>
  Sign Up
</Button>;

const Main = ({ primary, dark }) => {
  return (
    <Button
      to="home"
      dark={dark}
      primary={primary}
    >
      {buttonLabel}
    </Button>
  );
};

It works on the Hero section because any not empty string, in this case "true", is truthy so your condition (primary ? 'red' : 'blue') works, it'd stop working if you define it more explicity primary === true

You may as well want to reconsider your component design https://spicefactory.co/blog/2019/03/26/how-to-avoid-the-boolean-trap-when-designing-react-components/

to avoid these kind of mistakes it is a good invesment to spend some time learning typescript — diedu, Oct 02 '20 at 04:46

score 0 · Answer 2 · edited Oct 02 '20 at 04:28

So I found out for styled components where it says error can't pass true to non boolean, you have to use numbers instead

<Button
  to="home"
  smooth={true}
  duration={500}
  spy={true}
  exact="true"
  offset={-80}
  primary={primary ? 1 : 0}
  dark={dark ? 1 : 0}
  dark2={dark2 ? 1 : 0}
></Button>;

So now my data values get passed in when I use 1 : 0

Not sure why regular strings don't, but if anyone knows feel free to comment below

Why isn't my Styled component data getting passed into my Button for React?

2 Answers2