React - Props

1 - About

props is the only object argument passed to a component

Props is similar to State, but it is public and not fully controlled by the component.

3 - Syntax

in React - JSX


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

will create two props

  • props.name
  • and props.color

4 - 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() <note important>All React components must act like pure functions with respect to their props.</note> See React - State

5 - Management

5.1 - Default value

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

  • A class greeting component with one prop: name

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>

5.2 - Type checking

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

5.3 - Get

With the chrome plugin

6 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap