Programming

  minte9
LearnRemember



React / Props

Props

Add Rating component in App.js 
 
import React, { Component } from 'react';
import Rating from './Rating'; /* Look Here */

class App extends Component {
    render() {
        const isValid = true;
        return (
            <div className="App">
                <Rating rating="1"/> /* Look Here */
            </div>
        );
    }
}

export default App;
We can pass data into a component using this.props in Rating.js 
 
import React, {Component} from 'react';

class Rating extends Component {
    render() {
        /* this.props.rating (from <Rating rating="1">) */
        return (
            <h1>
                Rating: { this.props.rating }  /* Look Here */
            </h1>
        );
    }
}
export default Rating;

React DOM

We call render() in App.js with < Rating rating="1" />. React calls the Rating component with {rating: 1} as the props. Rating component returns a < h1>Rating: 1 element, and React DOM updates the real DOM. Props object may contain multiple and even complex objects as attribute(s).

Read-only

We can access props but never modify them. In other words, props are read-only. For example this is not allowed: 
 
...
    return (
        <h1>
            Rating: {this.props.rating++}
        </h1>
    );
...




References