React Components and Props

Functional components

Modern React uses functional components. They're plain JavaScript functions that return JSX.

// Basic component
function Greeting({ name }) {
    return <h1>Hello, {name}!</h1>;
}

// Arrow function (common in modern code)
const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

// Usage
<Greeting name="Alice" />

Props and destructuring

Props are read-only data passed from parent to child. Destructure them for cleaner code.

// Without destructuring
function Card(props) {
    return <div>{props.title}: {props.count}</div>;
}

// With destructuring (preferred)
function Card({ title, count, onClick }) {
    return (
        <div onClick={onClick}>
            {title}: {count}
        </div>
    );
}

// Default values
function Card({ title = "Untitled", count = 0, onClick }) { ... }

// Usage
<Card title="Score" count={42} onClick={() => console.log("clicked")} />

The children prop

children is a special prop that receives whatever is placed between component tags.

function Panel({ title, children }) {
    return (
        <div className="panel">
            <h2>{title}</h2>
            <div className="content">
                {children}
            </div>
        </div>
    );
}

// Usage — anything between the tags becomes children
<Panel title="User Info">
    <p>Name: Alice</p>
    <p>Role: Admin</p>
</Panel>

Prop types and validation

PropTypes validates the types of props at runtime in development.

import PropTypes from 'prop-types';

function Button({ label, onClick, variant }) {
    return <button onClick={onClick} className={variant}>{label}</button>;
}

Button.propTypes = {
    label:   PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
    variant: PropTypes.oneOf(['primary', 'secondary']),
};

Button.defaultProps = {
    variant: 'primary',
};

Exam tip

The key rule about props: they flow DOWN (parent to child) and are READ ONLY. A child cannot modify its own props. To change data in a parent, pass a callback function as a prop.