React - Props

About

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

Syntax

in React - JSX

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

will create two props

  • props.name
  • and props.color

Requirements

Props:

  • 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

Management

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, {this.props.name}</h1>
    );
  }
}
  • Specifies the default value for the name prop:
Greeting.defaultProps = {
  name: 'Stranger (Default)'
};
  • And render
ReactDOM.render(
  <Greeting />,
  document.getElementById('root')
);
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
</div>

Type checking

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

Change children type

See How to define the React children type in Typescript?

Get

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.

Example:

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
React Typescript Children Override Error
How to define the React children type in Typescript?

This article will show you how to override/define the type of children of your react component to a specific type in your props. In this example, we have a layout component that expects only buttons...
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...
React

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 - Caching

This article is caching functionalities in React. There are 2 caching functionalities: for computed values, you would use a memo for a prop function, you would use useCallback. If you pass a function...
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 - 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...



Share this page:
Follow us:
Task Runner