Passing property values

Properties are like state—they are data that get passed into components. However, properties are different from state in that they're only set once, when the component is rendered. In this section, we'll look at default property values. Then, we'll look at setting property values. After this section, you should be able to grasp the differences between component state and properties.

Default property values

Default property values work a little differently than default state values. They're set as a class property called defaultProps. Let's take a look at a component that declares default property values:

import React, { Component } from 'react'; 
 
export default class MyButton extends Component { 
  // The "defaultProps" values are used when the 
  // same property isn't passed to the JSX element. 
  static defaultProps = { 
    disabled: false, 
    text: 'My Button', 
  } 
 
  render() { 
    // Get...