Introduction to Props

Components and Props: Building Reusable UI Blocks Introduction In modern user interface development, especially with frameworks like React, the ability to break your application into small, manageable pieces is essential. A component is a reusable building block that renders part of a user interface. Think of components like functions: they take input, process that input, and return output (in this case, visual elements). The challenge is this: components need to be flexible enough to work in many different situations. A button component in one part of your app might need to display "Submit," while in another part it might display "Cancel." To solve this, components receive props—external information passed from parent to child that tells the component what to display or how to behave. This guide explains how components use internal data and how props provide the external information that makes components truly reusable. Understanding Components and Internal State A component is a self-contained piece of code that renders some visual output. Inside a component, you can manage state, which is internal data that the component owns and controls. For example, a counter component might keep track of a number in its state. When you click a button, the state changes, and the component re-renders to show the new number. The key distinction is this: State = data the component manages internally and can change Props = data passed into the component from outside How Components Relate to Each Other Components are often nested, creating a hierarchical structure. A parent component contains one or more child components. This relationship matters because it establishes how data flows through your application. A parent might pass information down to its children, and children can communicate back up to parents through callback functions (more on this later). This hierarchy is crucial for organizing larger applications. The Need for External Information (Props) Even though a component can manage its own internal state, it usually needs information from outside—text to display, images to show, user information, or instructions for what to do when clicked. Rather than hardcoding this information into every component, we use props to pass this information in dynamically. This is what makes components reusable. For example, instead of creating separate "GreetingAlice," "GreetingBob," and "GreetingCarol" components, you create one Greeting component that accepts a name as a prop. What Are Props? Props (short for "properties") are arguments supplied to a component when it is invoked. They are the primary way to pass data from a parent component to a child component. Syntax for Passing Props Props use an HTML-like attribute syntax: jsx <Greeting name="Alice" /> Here, name is a prop being passed to the Greeting component with the value "Alice". You can pass multiple props: jsx <UserCard name="Alice" age={25} isActive={true} /> Notice that strings are quoted (name="Alice"), while other types use curly braces (age={25}, isActive={true}). Accessing Props Inside a Component Inside the component, props are accessible through a props object. To use the name prop from the previous example: jsx function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } The component receives all props as a single object, and you access individual props using dot notation like props.name. Important Characteristics of Props Props Are Read-Only This is one of the most important rules: a component must never modify its own props directly. Props are read-only. If you try to do this: jsx function Greeting(props) { props.name = "Bob"; // ❌ WRONG return <h1>Hello, {props.name}!</h1>; } You'll cause problems. This seems like a strange restriction, but it exists for good reasons. Why Immutability Ensures Predictable Data Flow By keeping props immutable (unchangeable), React ensures that information always flows downward from parent to child. This unidirectional data flow is predictable and easier to debug. If multiple components could modify the same prop, you'd quickly lose track of who changed what and when. By making props read-only, you establish a clear contract: children receive information from parents, but don't modify it themselves. If a child component needs to change a value, it does so by calling a callback function provided by the parent, which updates the parent's state. The parent then passes the updated value back down as a prop. What Types of Values Can Be Props? Props can hold any JavaScript value: Strings: <Greeting name="Alice" /> Numbers: <Progress percent={75} /> Booleans: <Toggle enabled={true} /> Objects: <User profile={{ name: "Alice", age: 25 }} /> Arrays: <List items={["a", "b", "c"]} /> Functions: <Button onClick={handleClick} /> All of these are valid props, though functions deserve special attention. Using Functions as Props One of the most powerful patterns in component development is passing functions as props. This allows parent components to react to events that happen in child components. How Function Props Work A parent can pass a function to a child, often called a handler. When the child encounters an event (like a button click), it invokes this handler function. jsx function Parent() { const handleClick = () => { console.log("Child button was clicked!"); }; return <Child onClick={handleClick} />; } function Child(props) { return <button onClick={props.onClick}>Click me</button>; } Here, the parent passes the handleClick function to the child as the onClick prop. When the button is clicked, the child calls props.onClick(), which executes the parent's function. Why Use Function Props? Function props reverse the direction of communication: while normal props send data downward, function props let children send messages upward. This enables several important patterns: State updates: The child triggers an event, and the parent updates its state Data fetching: The child can request that the parent fetch data from an API Navigation: The child can ask the parent to navigate to a different page This is the key mechanism for making communication between parent and child components work while maintaining the principle that data flows downward. Best Practices for Working with Props Define Prop Types Explicitly To make components easier to use correctly, declare what props a component expects and what types they should be. This helps you and other developers understand what a component needs: jsx function UserCard(props) { // Component expects: // - props.name (string) // - props.age (number) // - props.onDelete (function) return ( <div> <p>{props.name}, age {props.age}</p> <button onClick={props.onDelete}>Delete</button> </div> ); } Many frameworks provide tools to enforce prop types and catch errors if the wrong type is passed. Keep Props Simple and Focused Pass only the data a child truly needs. Avoid sending an entire object when the child only needs one field from it. This makes it clearer what a component depends on: jsx // ❌ Passing unnecessary data <UserCard user={userData} /> // ✅ Pass only what's needed <UserCard name={userData.name} age={userData.age} /> Use Default Props for Optional Values Not every prop is required. For props that are optional, provide sensible default values: jsx function Button(props) { const label = props.label || "Click me"; const color = props.color || "blue"; return <button style={{ color }}>{label}</button>; } If a component can render without a prop, the component should handle the case where that prop isn't provided. This makes the component more flexible to use. Avoid Mutating Props in Child Components This reinforces the earlier point: if a child component needs to change a value, it must ask the parent to do so via a callback prop, not modify the prop directly: jsx // ❌ WRONG - trying to change props function Child(props) { props.count = props.count + 1; // Don't do this return <p>{props.count}</p>; } // ✅ CORRECT - ask parent to update via callback function Child(props) { const handleIncrement = () => { props.onIncrement(); // Call callback }; return ( <div> <p>{props.count}</p> <button onClick={handleIncrement}>Increment</button> </div> ); } Summary Components form the building blocks of modern user interfaces, and props are the primary mechanism for passing information into components. By understanding that props flow downward and are read-only, that children communicate back up through callback functions, and that clear, focused props make components more reusable, you'll be able to build well-structured applications that are easy to maintain and extend.