# React 18: Building Components - combining code for lessons 5,6,7,8

**URL:** <https://forum.codewithmosh.com/t/react-18-building-components-combining-code-for-lessons-5-6-7-8/20495>\
**Category:** Uncategorized\
**Created:** [May 27, 2023, 6:36am UTC](https://forum.codewithmosh.com/t/react-18-building-components-combining-code-for-lessons-5-6-7-8/20495 "2023-05-27T06:36:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![combyses](https://avatars.discourse-cdn.com/v4/letter/c/7cd45c/32.png) [@combyses](https://forum.codewithmosh.com/u/combyses)\
**Post date:** [May 27, 2023, 6:36am UTC](https://forum.codewithmosh.com/t/react-18-building-components-combining-code-for-lessons-5-6-7-8/20495/1 "2023-05-27T06:36:32Z")

</div>

I combined code for the lessons 5,6,7,8 for Building Components into one code base for my future reference:

```auto
import { useState } from "react";

function App() {
  let items = [
    "New York",
    "San Francisco",
    "Tokyo",
    "London",
    "Paris",
    "Rome",
    "Los Angeles",
  ];

  const [selectedIndex, setSelectedIndex] = useState(-1);

  //event handler
  const clickHandler =
    (index: number, item: String) => (event: React.MouseEvent<HTMLElement>) => {
      console.log(index + 1 + ". " + item);
      console.log("Event: ", event);
      setSelectedIndex(index); // set selected index
    };

  return (
    <>
      <h1>List</h1>
      {items.length === 0 && <p>No item found</p>}
      <ul className="list-group">
        {items.map((item, index) => (
          <li
            className={
              selectedIndex === index
                ? "list-group-item active"
                : "list-group-item"
            }
            key={item}
            onClick={clickHandler(index, item)} // Provide a new function that calls your handler with the data you need
          >
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;

```