Props

props are to components what arguments are to functions.

Examples

class Badge extends React.Component {
  render() {
    return (
      <div>
        <img src={this.props.img} />
        <h1>Name: {this.props.name}</h1>
        <h3>username: {this.props.username}</h3>
      </div>
    )
  }
}
 
ReactDOM.render(
  <Badge 
    name='Tyler McGinnis'
    username='tylermcginnis'
    img='https://avatars0.githubusercontent.com/u/2933430?v=3&s=460'/>,
  document.getElementById('app')
);

Object

var USER_DATA = {
  name: 'Tyler McGinnis',
  img: 'https://avatars0.githubusercontent.com/u/2933430?v=3&s=460',
  username: 'tylermcginnis'
}
 
class Badge extends React.Component {
  render() {
    return (
      <div>
        <img src={this.props.user.img} />
        <h1>Name: {this.props.user.name} </h1>
        <h3>username: {this.props.user.username}</h3>
      </div>
    )
  }
}
 
ReactDOM.render(
  <Badge user={USER_DATA}/>,
  document.getElementById('app')
);

Object with inheritance

class Avatar extends React.Component {
  render() {
    return (
      <img src={this.props.img} />
    )
  }
}
 
class Label extends React.Component {
  render() {
    return (
      <h1>Name: {this.props.name }</h1>
    )
  }
}
 
class ScreenName extends React.Component {
  render() {
    return (
      <h3>Username: {this.props.username } </h3>
    )
  }
}
 
class Badge extends React.Component {
  render() {
// console.log(this.props)
// *
Object {
  user: Object {
    img: "https://avatars0.githubusercontent.com/u/2933430?v=3&s=460",
    name: "Tyler McGinnis",
    username: "tylermcginnis"
  }
}
*/
    return (
      <div>
        <Avatar img={this.props.user.img} />
        <Label name={this.props.user.name} />
        <ScreenName username={this.props.user.username} />
      </div>
    )
  }
}
 
ReactDOM.render(
  <Badge user={{
    name: 'Tyler McGinnis',
    img: 'https://avatars0.githubusercontent.com/u/2933430?v=3&s=460',
    username: 'tylermcginnis'
  }} />,
  document.getElementById('app')
);

With maps

class ProductsListItems extends React.Component {
  render() {
    return (
      <div class="products">
       <ul>
         {this.props.products.map((product)=> {
           return <li>{product}</li> ;
         })}
       </ul>
      </div>
    )
  }
}
 
class ProductsBlock extends React.Component {
  render() {
    const products = ['Milk','Coke','Lemonade'];
    return (
      <div class="products">
        <ProductsListItems products={products} />
      </div>
    )
  }
}
 
ReactDOM.render(
  <ProductsBlock />,
  document.getElementById('app')
);

With both map and filter

class Users extends React.Component {
  render() {
 
    const friends = this.props.list.filter(function(user) {
      return user.friend === true // returns true if true
    });
 
    const nonFriends = this.props.list.filter(function(user) {
      return user.friend !== true // returns true if false
    });
 
    return (
 
      <div>
        <h1>Friends</h1>
        <ul>
          { friends.filter(function(user) {
            return user.friend; // returns true
          }).map(function(user) {
            return <li key={user.id} >{user.name}</li> // key is required for react
          })}
        </ul>
 
        <hr />
 
        <h1> Non Friends </h1>
        <ul>
            { nonFriends.filter(function(user) {
              return !user.friend // false
            }).map(function(user) {
              return <li key={user.id} >{user.name}</li> // key is required for react
            })}
        </ul>        
      </div>
    )
  }
}
 
ReactDOM.render(
  <Users list={[
    { id: 1, name: 'Tyler', friend: true },
    { id: 2, name: 'Ryan', friend: true },
    { id: 3, name: 'Michael', friend: false },
    { id: 4, name: 'Mikenzi', friend: false },
    { id: 5, name: 'Jessica', friend: true },
    { id: 6, name: 'Dan', friend: false } ]} 
  />,
  document.getElementById('app')
);
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License