CSS in JS - unable to import import "./ListGroup.css";

1

Hello,

I am unable to import ListGroup.css.

Can someone please help.

Below is my code:

import { useState } from “react”;
import “./ListGroup.css”;
import styled from “styled-components”;

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

interface ListItemProps {
active: boolean;
}

const ListItem = styled.li padding: 5px 0; background: ${(props) => (props.active ? "blue" : "none")};;

interface Props {
items: string;
heading: string;
onSelectItem: (item: string) => void;
}
function ListGroup({ items, heading, onSelectItem }: Props) {
const [selectedIndex, setSelectedIndex] = useState(0);

return (
<>

{heading}

  {items.length === 0 && <p>No item found</p>}
  <List className="list-group">
    {items.map((item, index) => (
      <ListItem
        active={index === selectedIndex}
        key={item}
        onClick={() => {
          setSelectedIndex(index);
          onSelectItem(item);
        }}
      >
        {item}
      </ListItem>
    ))}
  </List>
</>

);
}

export default ListGroup;

Screen Shot 2024-05-12 at 6.55.51 PM
Screen Shot 2024-05-12 at 6.55.51 PM958×620 82.7 KB

Thanks,
Bilal

2

Hi are you sure the CSS file is in the current folder where the file is that is importing it? ie: the one above. Also double check the spelling and capitalization of the filename is exactly the same