React — Props and State(Part2)

Props And State

Props

• Input passed to a component
• Similar to function Argument
• Immutable
• Cause a re-render

State

• Data managed by a component
• Similar to local variable
• Mutable (Data can change overtime)
• Cause a re-render

Managing State in React

• We use the state hook to define state (data that can change over time) in a component.
• A hook is a function that allows us to tap into built-in features in React.

import { useState } from "react";

function ListGroup() {
  let items = ["New York", "San Fransico", "Denver"];
  const [selectedIndex, setSelectedIndex] = useState(-1);

  return (
    <>
      <h1>List Group</h1>
      <ul className="list-group">
        {items.length == 0 && <p>List is Empty</p>}
        {items.map((item, index) => (
          <li
            key={item}
            className={
              selectedIndex === index
                ? "list-group-item active"
                : "list-group-item"
            }
            onClick={() => {
              setSelectedIndex(index);
            }}
          >
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}
export default ListGroup;

Passing Data via Props

Prop = Properties are the input to the component

• Components can optionally have props (short for properties) to accept input.
• 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 an item being clicked or selected.
• We should treat props as immutable (read-only) and not modify them.
• We use TypeAnnotation to specify type of properties

import ListGroup from "./components/ListGroup";

function App() {
  let items = ["New York", "San Fransico", "Denver"];
  let colorItems = ["Green", "Yellow", "Blue"];
  return (
    <div>
      <ListGroup items={items} heading="List of Cities" />
      <ListGroup items={colorItems} heading="List of Color" />
    </div>
  );
}

export default App;

interface ListGroupProp {
  items: string[];
  heading: string;
}

function ListGroup({ items, heading }: ListGroupProp) {
  return (
    <>
      <h1>{heading}</h1>
      <ul className="list-group">
        {items.length == 0 && <p>List is Empty</p>}
        {items.map((item, index) => (
          <li key={item} className="list-group-item">
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}
export default ListGroup;

Passing Function via Props

import ListGroup from "./components/ListGroup";

function App() {
  let items = ["New York", "San Fransico", "Denver"];
  let colorItems = ["Green", "Yellow", "Blue"];

  const handleSeletedItem = (item: string) => {
    console.log(item);
  };
  return (
    <div>
      <ListGroup
        items={items}
        heading="List of Cities"
        onSelectedItem={handleSeletedItem}
      />
      <ListGroup
        items={colorItems}
        heading="List of Color"
        onSelectedItem={handleSeletedItem}
      />
    </div>
  );
}

export default App;

import { useState } from "react";

interface ListGroupProp {
  items: string[];
  heading: string;
  onSelectedItem: (item: string) => void;
}

function ListGroup({ items, heading, onSelectedItem }: ListGroupProp) {
  const [selectedIndex, setSelectedIndex] = useState(-1);
  return (
    <>
      <h1>{heading}</h1>
      <ul className="list-group">
        {items.length == 0 && <p>List is Empty</p>}
        {items.map((item, index) => (
          <li
            key={item}
            className={
              selectedIndex === index
                ? "list-group-item active"
                : "list-group-item"
            }
            onClick={() => {
              setSelectedIndex(index);
              onSelectedItem(item);
            }}
          >
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}
export default ListGroup;

Passing Children

You can install ES7+ extension for fast writing shortcut to create a function component.

import Alert from "./components/Alert";

function App() {
  return (
    <div>
      <Alert>
        <h1>Hello world</h1>
      </Alert>
    </div>
  );
}

export default App;

import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}

const Alert = ({ children }: Props) => {
  return (
    <div className="alert alert-primary" role="alert">
      {children}
    </div>
  );
};

export default Alert;

Inspecting Components With React Dev Tools