Props

Props are read-only. Whether you declare a component as a function or a class, it must never modify its own props.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Passing props to a Component

const element = <Welcome name="Sara" />;

Default Props

class ThemedButton extends React.Component {
  render() {
    // ...implement render method
  }
}

// Set default props
ThemedButton.defaultProps = {
  theme: "secondary",
  label: "Button Text"
};

Defining Properties

import * as React from "react";
import { Component } from "react";
import PropTypes from "prop-types";

class Controls extends Component {

  render() {
    const { resetLabel, incrementLabel, decrementLabel, increment, decrement, resetCount } = this.props;

    return (
      <div className="controls">
        <div onClick={() => {increment();}}>
          <span>{incrementLabel}</span>
        </div>
        <div onClick={() => {resetCount(0);}}>
          <span>{resetLabel}</span>
        </div>
        <div onClick={() => {decrement();}}>
          <span>{decrementLabel}</span>
        </div>
      </div>
    );
  }
}

Controls.propTypes = {
  increment: PropTypes.func,
  decrement: PropTypes.func,
  resetCount: PropTypes.func,
  resetLabel: PropTypes.string,
  incrementLabel: PropTypes.string,
  decrementLabel: PropTypes.string,
};

Controls.defaultProps = {
  resetLabel: "RESET",
  incrementLabel: "+",
  decrementLabel: "-"
};

export default Controls;