Prop
A React prop is an input value passed from a parent component to a child component to configure its rendering or behavior.
React Quickly, Second Edition
A React property is an immutable value assigned by a parent to a child element or component and exposed to the child through its props.
- How it is used
- Customizes reusable components with parent-supplied values for rendered text, links, and other UI behavior.
- How deep it goes
- Works through assigning and reading props in classes, functions, and JSX, including immutability; does not develop React's internal prop handling.
- Examples
- Uses customized links, menu items, a styled counter, an email input, and a dashboard that forwards a user name.
- What you can do after
- Build it from scratch: pass values from parents and read them in reusable class or function components without modifying them.
Build a Frontend Web Framework (From Scratch)
Component input values passed from a parent component to a child component.
- How it is used
- Passes data from parent components to children in a view split into subcomponents.
- How deep it goes
- Implements constructor storage, initialization from props, and re-rendering through updateProps() and virtual DOM patching.
- Examples
- Uses a to-do item's index and a counter's initial count to show props passed to children and constructors.
- What you can do after
- Build it from scratch by storing incoming props, passing them to subcomponents, and patching a child's view when they change.
Read how Build a Frontend Web Framework (From Scratch) explains prop →
D3.js in Action, Third Edition
React props are read-only input values passed from a parent component to a child component to configure rendering or behavior.
- How it is used
- Configures reusable React chart components with data, dimensions, scales, SVG attributes, and callback behavior.
- How deep it goes
- Demonstrates prop passing and consumption through complete SVG components, optional values, mapped data, and event callbacks without discussing prop internals.
- Examples
- Uses dashboard data loading, a retention-versus-usage scatterplot, reusable circles and axes, and interactive ranking filters.
- What you can do after
- Apply it via React to compose configurable chart components and route filter-click behavior back to parent state.
Essential TypeScript 5, Third Edition
Props are input values supplied to a user-interface component or class to configure the content or behavior it renders.
- How it is used
- Configures JSX-rendered components with display data, DOM properties, and callbacks for application events.
- How deep it goes
- Defines typed data, callback, and optional callback props, but does not descend into a general component-state model.
- Examples
- Uses ProductItem, CategoryList, ProductList, Header, and OrderDetails to pass products, orders, selections, categories, and callbacks.
- What you can do after
- Apply it via TypeScript JSX by declaring component prop types and passing data or callbacks into rendered components.
Read how Essential TypeScript 5, Third Edition explains prop →
React in Depth
A React prop is an input value passed to a component to configure its rendering or behavior.
- How it is used
- Configures component rendering or behavior while providing inputs that can be inspected during debugging.
- How deep it goes
- Explains parent-driven re-renders, ref mutation, and live inspection, but stops short of a broader rendering-performance strategy.
- Examples
- Uses a render-highlighting component, state and ref buttons, and a dark-mode application inspected through React Developer Tools.
- What you can do after
- Diagnose/debug with render probes and React Developer Tools to distinguish prop changes from the events that actually trigger renders.
Related concepts
- componentused by · A software component is a modular part of a larger system that provides related functionality and interacts with other parts through defined boundaries or interfaces.
- React contextalternative to · React context is a mechanism for making values available to descendant components without explicitly passing them through intermediate components.
- stateconfigures · State is information or a configuration describing the condition of a system, entity, or computation at a particular time and potentially influencing subsequent behavior or decisions.
- React componentconfigures · A React component is a reusable user-interface unit, defined by a function or class, that describes rendered content and behavior from inputs and state.
- parent elementused by · A parent element is an entity directly above another entity in a hierarchy, with the latter being its child.
- JSXused by · JSX is a JavaScript syntax extension for expressing user-interface elements with XML-like or HTML-like markup that is transformed into JavaScript.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.