React Components & State

Functional Components & Props

• React components are functions that return JSX.

• Props are how parent → child communication happens.

► src/components/Greeting.jsx

export default function Greeting({ name, age }) {

  return <p>{name} is {age} years old.</p>;

}

• Here: name & age are props

• Destructuring props: Instead of Greeting(props) we use: Greeting({ name, age })

► usage in App.jsx

import Greeting from './components/Greeting';

export default function App() {

  return (

    <div>

      <Greeting name="Ava" age={28} />

      <Greeting name="Sam" age={34} />

    </div>

  );

}

State with useState

• React state is how a component remembers information between renders.

• In functional components, the most common way to use state is with the useState hook.

useState → lets your component store and update values over time.

import { useState } from "react";

• It returns two things:

  • The state value

  • A function to update the value

const [count, setCount] = useState(0);

• count → current value

• setCount → function that updates the value

• 0 → initial value

Calling the setter function (setCount) → React re-renders the component with the new value.

• Example: Counter (can be placed in its own file: Counter.jsx)

import { useState } from "react";

export default function Counter() {

  const [count, setCount] = useState(0);

  return (

    <div>

      <p>Count is {count}</p>

      <button onClick={() => setCount(count + 1)}>

        Increment

      </button>

    </div>

  );

}

• How it works:

  • Start with count = 0

  • When button is clicked → setCount(count + 1)

  • React re-renders → UI shows new count

useState with strings

const [name, setName] = useState("");

<input

  value={name}

  onChange={(e) => setName(e.target.value)}

/>

useState with objects

• Important: Updating objects requires copying the old value.

const [user, setUser] = useState({ name: "Alex", age: 25 });

setUser({ ...user, age: 26 });

useState with arrays

const [items, setItems] = useState([]);

setItems([...items, "New item"]);

useState with Boolean/Toggle state

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(prev => !prev)}>

  {isOpen ? "Close" : "Open"}

</button>