React - Props


props is the only object argument passed from a component to another component.

  • Props are similar to State, but is public and not fully controlled by the component.
  • You can also pass arguments to the whole tree via a context


in React - JSX

<MyComponent name={javascriptVariable} color="Blue"/>

will create two props

  • and props.color



  • must be named from the component's own point of view rather than the context in which it is being used.
  • are read-only. A component must never modify its own props. It must modify it via this.setState() All React components must act like pure functions with respect to their props. See React - State


Default value

Default values are defined by assigning to the special defaultProps property to the component.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {}</h1>
  • Specifies the default value for the name prop:
Greeting.defaultProps = {
  name: 'Stranger (Default)'
  • And render
  <Greeting />,
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->

Type checking

built-in Type checking in React is known as prop-types


With the chrome plugin

React Props Chrome Plugin

How to pass the keys of an object as props?

You use the spread operator to destructure the object.


let props = { "x": 10, "y": 20 };
<Component {...props}/>

How to add props and pass parent props to a child?

Example with the spread operator to merge properties.

function Parent(parentProps){
  return <Child  {...{extra: 'value', ...parentProps}}/>

Example how to add a class Name

function Parent(parentProps){
  return <Child  {...{...parentProps, className: 'value '+parentProps.className}}/>

Documentation / Reference

Discover More
Javascript - Array

array in Javascript can contain any type of data. Different types of values can be stored within the same array Because arrays are special objects (as typeof implies), they can also have properties, including...

is a virtual dom technology that permits to create HTML page or components based on the concepts that: If the data (state) changes, the UI should change too. Learn once, write anywhere Babel for...
React - Children Element

When you create an element, you pass one or more children elements that will build the React DOM tree. componentyou create a component Related: See also The below example codes are created with JSX....
React Props Chrome Plugin
React - Chrome Developer Tool

React Developer Tools is a Chrome DevTools extension. It allows to inspect: the React component hierarchies and their props in the Chrome Developer Tools. With props ...
React - Component (User-defined Element)

A component is a user-defined react element in the React tree. Components let you split the UI into independent, reusable pieces, and think each piece in isolation. Conceptually, components are like...
React - Dependency Injection

in React (via parent/children) Interface: only via Typescript
React - Element

An element is a node in the React tree (React DOM implementation). component getting started createElementjsx filescreateElement e A counter component with a useState hook to show how to call...
React - Forwarding Ref

The forwardRef function wraps a element to add to the props a ref that is generated by React. This ref is called a forwarding ref because you pass it along to use it in one of its child components in...
React - Getting Started (The Welcome Element)

React is a virtual dom library that: permits to define the HTML dom programmatically will update HTML dom incrementally There is basically two big steps when you work with React (or any virtual...
React - Jquery

Jquery integration in React React is unaware of changes made to the DOM outside of React therefore to integrate DOM manipulation library such as Jquery, React should be prevented from updating the component...

Share this page:
Follow us:
Task Runner