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

React
1

In Mosh’s video about CSS-in-JS, coding along everything works but I noticed some warning / error in the Console:

image
image1252×381 73.6 KB

During the class Mosh was not showing his Console so not sure if this happened to him as well.

Here is my code with no Warning / Error from the compiler:

import { useState } from 'react';
import styled from 'styled-components';

const List = styled.ul`
  list-style: none;
`

interface ListItemProps {
  active: boolean
}

const ListItem = styled.li<ListItemProps>`
  background-color: ${ props => (props.active ? "blue" : "none")};
  font-weight: bold;
`

interface Props {
  children: string[]
}


function ListGroup({ children }: Props) {
  const [selectedIndex, _] = useState(0)

  return (
    <List>
      {children.map((item, index) => (
        <ListItem
          active={(index === selectedIndex)}
          key={item}
        >
          {item}
        </ListItem>
      ))}
    </List>
  );
}

export default ListGroup;

BTW one more thing… I didn’t quite understand this part (this ListItemProps):

const ListItem = styled.li<ListItemProps>`
  background-color: ${ props => (props.active ? "blue" : "none")};
  font-weight: bold;

Looking around this seems to be some sort of nested thing from TS, what is this?

Thanks.

2

Tried quite a bit doing many different things, even tried using a String instead of Boolean as the error message says but no luck so far.