this.props

prop is a piece of passed-in information.

props is an object that holds passed-in information.

this.props refers to that storage object.

Components can pass aprop to another component by giving that component an attribute:

<MyComponent  // component instance
    foo =     // attribute
    'bar'     // prop
    />

<Example message='This is some top secret info.' />

<Greeting myInfo={['top', 'secret', 'lol']} />

<Greeting name='Frarthur' town='Flundon' age={2} haunted={false} />

⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯

import React from 'react';
import ReactDOM from 'react-dom';

class PropsDisplayer extends React.Component {
  render() {
      const stringProps = JSON.stringify(this.props);

    return (
      <div>
        <h1>CHECK OUT MY PROPS OBJECT</h1>
        <h2>{stringProps}</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <PropsDisplayer myProp="Hello"/>,  // PropsDisplayer component given an attribute with prop "Hello"
  document.getElementById('app'))

CHECK OUT MY PROPS OBJECT

{"myProp":"Hello"}

Render a Component's props

To make a component display passed-in information:

1. Find the component class that's going to receive that information
2. Include this.props.name-of-information in that component class's .render() return statement.

import React from 'react';
import ReactDOM from 'react-dom';

class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}!</h1>;
  }
}

ReactDOM.render(
  <Greeting firstName='Frank' />, 
  document.getElementById('app')
);

Pass props From Component to Component

The most common use of props is to pass information to a component from a different component.

// Greeting.js

import React from 'react';

export class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.name}!</h1>; // Greeting returns the value of name
  }
}

// App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Greeting } from './Greeting'; // We import the Greeting component

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>
        <Greeting name="Frank" /> // The prop "Frank" is assigned to name
        <article>
          Latest newzz:  where is my phone?
        </article>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

props and Conditions

You can do more with props than just display them. You can also use props to make decisions.

if (this.props.signedIn == false) {
  return <h1>GO AWAY</h1>;
} else {
  return <h1>Hi there, {this.props.name}!</h1>;
}

Put an Event Handler in a Component Class

You can also pass functions and event handlers as props.

First you have to define the event handler as a method on a component class:

import React from 'react';

class Example extends React.Component {
  handleEvent() {
    alert(`I am an event handler.
      If you see this message,
      then I have been called.`);
  }

  render() {
    return (
      <h1 onClick={this.handleEvent}>
        Hello world
      </h1>
    );
  }
}

The event handler handleEvent()is defined in the Example component class. Then it is attached to a click event onClick={this.handleEvent}.

⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯

// Talker.js 

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Talker extends React.Component {
  talk() {  // Event handler defined
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }

  render() {
    return <Button talk={this.talk} />; // Passing .talk() to Button component
  }
}

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

// Button.js

import React from 'react';

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.talk}> 
      // When the button is clicked
      // Calls .talk() from this.talk in the Button component instance 
        Click me!
      </button>
    );
  }
}

handleEvent, onEvent, and this.props.onEvent

Naming conventions for event handlers, events and props.

Event handler name has to be the handle+ type of event you're listening for:

handleClick for click events

handleKeyPress for key press events

handleHover for hover events

Prop name should be on + event type

onClick if listening for click events

onKeyPress if listening for a key press event

// Talker.js

  handleClick() { // renamed to follow naming convention

  ...

  render() {
    return <Button onClick={this.handleClick} />;
    // renamed to follow naming convention

  ...

// Button.js

<button onClick={this.props.onClick}>
// renamed to follow naming convention

Notice onClick is used in both <Button /> and <button>

When used in a component instance onClick is just an arbitrary attribute name.

When used in an HTML tag, onClick is an event listener.

this.props.children

Every component's props object has a property named children.

this.props.children will return everything in between a component's opening and closing JSX tags.

<BigButton>
    I am a child of BigButton.
</BigButton>

this.props.children == I am a child of BigButton.

<BigButton>
    <LilButton />
    <LilButton />
</BigButton>

this.props.children == ['<LilButton />','<LilButton />']

<BigButton />

this.props.children == undefined

⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯

// App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { List } from './List';

class App extends React.Component {
  render() {
    return (
      <div>
        <List type='Living Musician'>
          <li>Sachiko M</li>
          <li>Harvey Sid Fisher</li>
        </List>
        <List type='Living Cat Musician'>
          <li>Nora the Piano Cat</li>
        </List>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

// List.js

import React from 'react';

export class List extends React.Component {
  render() {
    let titleText = `Favorite ${this.props.type}`;
    if (this.props.children instanceof Array) {
        titleText += 's';
        // Pluralizes titleText if there are multiple <li> items
    }
    return (
      <div>
        <h1>{titleText}</h1>
        <ul>{this.props.children}</ul>
        // Displays contents of List
      </div>
    );
  }
}

defaultProps

You can set default property on a component class:

class Button extends React.Component {
    render() {
        return (<button>{this.props.text}</button>);
    }
}

Button.defaultProps = {text: 'default button text'}

ReactDOM.render(
    <Button text='I am a button' />, 
    document.getElementById('app')
)

If <Button /> was rendered without text, it will show the default text.