Frontend Academy · Lesson

Functional Components and Props

Create components as functions, accept and destructure props, use PropTypes or TypeScript types to document expected data shapes.

Functional Components and Props is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a React Component?

A React component is a JavaScript function that returns JSX. Components are the building blocks of React applications — reusable, composable pieces of UI.

function Welcome() {
  return <h1>Welcome to CoddyKit!</h1>;
}

// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;

Props — Passing Data Down

Props (properties) are how you pass data from parent to child. The component receives them as its first argument as a plain object.

function Greeting({ name, role }: { name: string; role: string }) {
  return <p>Hello, {name}! Your role is {role}.</p>;
}

// Usage:
<Greeting name="Alice" role="admin" />

TypeScript Interface for Props

Define a named interface for props to get autocomplete, type checking, and documentation.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'ghost';
}

function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

children Prop

The children prop contains the content between the component's opening and closing tags. Type it as React.ReactNode to accept any renderable content.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage:
<Card title="Hello">
  <p>Card content goes here.</p>
</Card>

Default Props with Destructuring

Set default values directly in the destructuring pattern. This is the modern approach — the deprecated defaultProps API is no longer recommended.

function Alert({ type = 'info', message, onClose }: AlertProps) {
  return (
    <div className={`alert alert-${type}`}>
      <span>{message}</span>
      <button onClick={onClose}>×</button>
    </div>
  );
}

Composing Components

Components compose: a Page uses a Layout, which uses a Nav and a Sidebar, which each use smaller atoms like Button and Icon. This tree of components is the React component tree.

Naming Conventions

Component names must start with a capital letter. Lowercase names are treated as HTML elements. <div> is an HTML div; <Div> is a React component named Div.

Pure Components

A component is pure if the same props always produce the same output and no side effects occur during rendering. Pure components are easier to reason about and optimise.

// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;

// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
  localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
  return <p>{id}</p>;
};

Passing Functions as Props

Functions (callbacks) are passed as props to let children communicate upward to parents. The parent defines the function; the child calls it.

function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
  return (
    <li>
      {text}
      <button onClick={onDelete}>Delete</button>
    </li>
  );
}

Spreading Props

The spread operator passes all props from an object to a component. Useful for wrapper/pass-through components, but use with care — unexpected props can be passed through.

function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} className={`input-base ${props.className || ''}`} />;
}

Fragment and Keys in Props Context

When rendering a list of components as children, each must have a unique key prop. Keys help React identify which items changed, were added, or removed.

Quick Check

How do you provide a default value for a prop in a modern React function component?

Recap: Components and Props

Functional components are JavaScript functions returning JSX. Props pass data from parent to child. Use TypeScript interfaces for prop types. children: React.ReactNode for slot content. Default values in destructuring. Pass callbacks as props for child-to-parent communication. Names start with capital letters.

Frequently asked questions

Is the “Functional Components and Props” lesson free?

Yes — the full text of “Functional Components and Props” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Functional Components and Props”?

Create components as functions, accept and destructure props, use PropTypes or TypeScript types to document expected data shapes. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Functional Components and Props” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy