CODEWITHSUNDEEP
javascriptreactjsstyled-components
dlkhjs
dlkhjs

Reputation: 23

How do I make conditional rendering for styled component?

const Agree = styled.button`
  width: 270px;
  height: 40px;
  margin-top: 100px;
  font-weight: bold;
  font-size: 17px;
  color: ${({ isValid }) => (isValid ? 'white' : 'grey')};
  border-radius: 5px;
  border: none;
  background-color: ${({ isValid }) =>
    isValid ? 'lightskyblue' : 'lightgrey'};
`;

const [checkedOne, setCheckedOne] = useState(false);
const [checkedSecond, setCheckedSecond] = useState(false);

<Agree isValid> Valid </Agree>

Here I want to make Agree component such that if checkedOne and checkedTwo are both true, Agree component has props isValid and when one of them is false, it is just <Agree> valid <Agree>. I tried code like this -> {checkedOne && checkedSecond ? <Agree isValid> Valid </Agree>} Yet, it does not work and I was wondering if there is a way to have "isValid" appear when two states are true.

Upvotes: 1

Views: 33

Answers (1)

Apurva Mistry
Apurva Mistry

Reputation: 126

If I understand correctly, you want to pass the prop only when both state variables are true, otherwise not. You can try doing it this way:


  const [checkedOne, setCheckedOne] = useState(false);
  const [checkedSecond, setCheckedSecond] = useState(false);

  const props = checkedOne && checkedSecond ? {isValid: true} : {};

  return <Agree {...props}> Valid </Agree>;

Upvotes: 1

Related Questions