3

How can I resolve this warning?

Warning: Received `true` for a non-boolean attribute `active`.

From this error, I understood not to pass anything other than the standard attributes. However, I was able to solve the error by changing the argument type from boolean to number. Why does it work with the number type?

import { Link } from "react-router-dom";

...
<NavigationArea active={true} to="/nikkei">
...

const NavigationArea = styled(Link)<{ active: boolean }>`
  width: 50%;
  text-align: center;
  padding: 8px;
  font-weight: bold;
  color: ${(props) => (props.active ? "#22AFFF" : "#808080")};
`;
ibij
  • 41
  • 1
  • 2
  • similar Q asked [here](https://stackoverflow.com/questions/49784294/warning-received-false-for-a-non-boolean-attribute-how-do-i-pass-a-boolean-f) – KcH Apr 05 '21 at 02:52

1 Answers1

0

You can use string type in props value below is the code

active="true"

Ramesh Varghese
  • 11
  • 2