Search code examples
javascriptcssreactjsecmascript-6styled-components

React does not recognize the `isActive` prop on a DOM element - styled-components

I have the following svg component where I am passing props.

import React from 'react';
export default (props) => (
  <svg {...props}>
    <path
      d="M11.5 16.45l6.364-6.364"
      fillRule="evenodd"
    />
  </svg>
);

I then have a styled-component that looks like this. 

const Icon = styled(_Icon)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`;

I am seeing the following react error.

Warning: React does not recognize the isActive prop on a DOM element.

Solution

  • I ran into the same issue with styled-components and I ended up doing something like this:

    <Icon isactive={isActive.toString()} />

${props =>
  props.isactive === 'true' &&
  css`
    transform: rotate(-180deg);
  `};
}