React props

import React from 'react';
import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';
 
class App extends React.Component {
 
    render() {
        return (
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagline="Jim is cool" age={500} cool={true} />
                </div>
                <Order />
                <Inventory />
            </div>
        )
    }
 
}
 
export default App;

- how to pass props into a component, this is the App.js

note that you must use braces {} for props that are a certain type like boolean or numbers

import React from 'react';
 
class Header extends React.Component {
 
    render() {
        return (
            <header className="top">
                <h3 className="tagline">
                    <span>{this.props.tagline}</span>
                </h3>
            </header>
        )
    }
 
}
 
export default Header;

- how to import a prop into a component, this is the Header.js

or

function Header( props ) {
    <header className="top">
        <h1>Catch
            <span className="ofThe">
                <span className="of">of</span>
                <span className="the">the</span>
            </span>
            Day
        </h1>
        <h3 className="tagline">
            <span>{props.tagline}</span>
        </h3>
    </header>
}

- pass props into a function, and avoid having to use this
or

const Header = ( props ) => {
    return(
        <header className="top">
            <h1>Catch
                <span className="ofThe">
                    <span className="of">of</span>
                    <span className="the">the</span>
                </span>
                Day
            </h1>
            <h3 className="tagline">
                <span>{props.tagline}</span>
            </h3>
        </header>
    )
}

- use arrow functions
or

const Header = ( props ) => (
    <header className="top">
        <h1>Catch
            <span className="ofThe">
                <span className="of">of</span>
                <span className="the">the</span>
            </span>
            Day
        </h1>
        <h3 className="tagline">
            <span>{props.tagline}</span>
        </h3>
    </header>
);

- use implicit returns which is also called a stateless functional component