Master the React Fundamentals: Basics 02

Photo by Lautaro Andreani on Unsplash

In React, we almost never have to touch the DOM directly. This is the beauty of React. We think in terms of components, and each component has a state. When the state of a component changes, react will update the DOM to match the new component.

React hook is a function that allows us to tap into the built-in features of react Library.

We can pass data and functions to a component using props. Functions are used to notify the parent (consumer) of a component about certain events that occur in the component, such as click event or list item selected etc.

As a best practise we should treat props as immutable and not modify them. Components can optionally have props to accept input. In React community Destructuring technique is heavily used to optimally send props to different components.

Note: In my view, TypeScript is the optimal choice, even though it comes with a slight learning curve, as it helps prevent numerous compile-time issues in the future.

Scenario: I have list of cities and I want to pass this data to a different component. Also, I want to capture the user event when user clicked on list item.

We have 2 components App and List Group. From App component we will define list of cities (In real time data can come from API, user Input etc). Just to demonstrate the user selection capture I have used the bootstrap library (See the output screenshot).

To render a list in JSX, we have used array.map() method. Captured the onclick event via state so that we will leave the rerendering to react library when state change happens and React will manage the life cycle of a component under the hood. We also used destructuring when we receive list of cities and heading from App component to ListGroup Component.

function ListGroup({ items, heading }: ListGroupProps) {
 .........
}

Here is the complete code snippet and output through which we can understand the above points.

App.tsx:

import ListGroup from "./components/ListGroup";

function App() {
  let items = ["Banglore", "Hyderabad", "Delhi", "Mumbai"];
  return (
    <div>
      <ListGroup items={items} heading="Cities" />
    </div>
  );
}

export default App;

ListGroup.tsx

import { useState } from "react";

interface ListGroupProps {
  items: string[];
  heading: string;
}
function ListGroup({ items, heading }: ListGroupProps) {
  const [selectedIndex, setSelectedIndex] = useState(-1);
  return (
    <>
      <h1>{heading}</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={() => {
              console.log(item, index);
              setSelectedIndex(index);
            }}
          >
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

That’s all for now. If you have come this far hope you like this article, you can encourage me with your clap.