React for Beginners - chosen list element is not highlighted

React
1

I’m on first lessons. It is blocking me because, for unknown reason it is not looking same as in tutorial. I’m writing same code with Mosh Recording and have different effects. I I’m on lesson “Building Components” → 7 Managing State
and when I’m choosing one element from list instead of highlighting on blue it is aligns to right.

image
image1128×1358 91.9 KB

2

it would be better if you share your react code here.

  1. clear all css given to you by react
  2. see if you imported bootstrap correctly
  3. use inspector to inspect the individual elements that aligns right and check which css code are making it do that
3

All css files are empty on this step of course

//main.tsx:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//App.tsx:
import ListGroup from "./components/ListGroup";

function App() {
  return (
    <div>
      <ListGroup />
    </div>
  );
}

export default App;
//ListGroup.tsx:
import { useState } from "react";
// import "./ListGroup.css";

function ListGroup() {
    let items = ["New York", "San Francisco", "Tokyo", "London", "Paris"];
    const [selectedIndex, setselectedIndex] = useState(-1);
    return (
        <>
            <h1>List</h1>
            {items.length === 0 && <p>No item found</p>}
            <ul className="list-group">
                {items.map((item, index) => (
                    <li
                        className={
                            selectedIndex === index
                                ? "listg-group-item active"
                                : "list-group-item"
                        }
                        key={item}
                        onClick={() => {
                            setselectedIndex(index);
                        }}
                    >
                        {item}
                    </li>
                ))}
            </ul>
        </>
    );
}

export default ListGroup;
4

Hi I can see you have a typo on your first className in your li

5

Królu złoty dziękuję!:wink: Thank you very much lucidlear :slight_smile: